Indeterminate circular loading indicator.
Install with the CLI, or copy the component source into your project.
Add spinner (npm)
npx --yes -p github:itsvigneshv/default-file-ui#main df-ui add spinner
Indeterminate circular spinner at the default size.
Ring diameters from xs to lg.
Stroke follows the host text color.
Indeterminate circular loading indicator. Uses currentColor so it matches the host text color.
| Prop | Type | Default | Notes |
|---|---|---|---|
| size | "xs" | "sm" | "md" | "lg" | "md" | Diameter of the ring. |
| aria-label | string | "Loading" | Accessible name when the spinner is announced. Ignored when the spinner is hidden from assistive tech. |
| aria-hidden | boolean | - | Hide from assistive tech when a parent already exposes busy state. |
| className | string | - | Additional styles. |
Theme defaults live on :root. Override these globally or on a local host.
| Token | Type | Default | Notes |
|---|---|---|---|
| --df-spinner-size-xs | CSS length | calc(3 * var(--spacing-unit)) | xs diameter. |
| --df-spinner-size-sm | CSS length | calc(3.5 * var(--spacing-unit)) | sm diameter. |
| --df-spinner-size-md | CSS length | calc(4 * var(--spacing-unit)) | md diameter. |
| --df-spinner-size-lg | CSS length | calc(5 * var(--spacing-unit)) | lg diameter. |
| --df-spinner-stroke | CSS length | var(--border-width-thick) | Ring stroke width. |
| --df-spinner-track-opacity | number | var(--df-opacity-25) | Muted full ring opacity. |
| --df-duration-spin | CSS time | 1s | One full rotation period. |