Skip to main content

Spinner

A small animated indicator used to signal a loading state.

Usage​

import { Spinner } from '@easy-ui-react/easy-ui-react'

export function Example() {
  return <Spinner />
}
Live Editor
<Spinner />
Result
Loading...

Sizes​

  • sm
  • md
  • lg
Live Editor
<Spinner size="lg" />
Result
Loading...

Color​

Spinner draws with currentColor, so it inherits the text color of its parent. Set a text color class via className to change it:

Live Editor
<Spinner className="text-(--easyui-color-primary)" />
Result
Loading...

Props​

PropTypeDefaultDescription
size'sm' | 'md' | 'lg''md'Spinner size
classNamestring-Class applied to the root <svg>

Spinner is decorative (aria-hidden="true"), renders a single <svg> element and does not forward a ref.

Storybook​

Open in Storybook → and see more combinations.