Feedback/Spinner
Spinner
A lightweight animated loading indicator that signals asynchronous operations. Available in five sizes, four animation variants, and fully colorable via CSS color values.
import {Spinner} from "@animui/ui"Sizes
Five size presets cover every use case from inline icons to full-page loaders.
xs
sm
md
lg
xl
Colors
Pass a CSS color value to the color prop to match your brand or surface context. Accepts hex, rgb, named colors, or currentColor.
#3b82f6
#10b981
#f43f5e
#f59e0b
#a855f7
With text
Combine a Spinner with a label to give users contextual feedback during long operations.
Loading your data…
Saving changes…
Processing payment…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Controls the diameter of the spinner. xs=12px, sm=16px, md=24px, lg=36px, xl=48px. |
variant | "ring" | "dots" | "bars" | "pulse" | "ring" | Animation style of the spinner. |
color | string | "currentColor" | CSS color value for the spinner. Defaults to currentColor (inherits from text color). Pass a hex, rgb, or named CSS color. |
className | string | — | Additional CSS classes applied to the spinner element for custom overrides. |