Ravox KitBasics
Spinner
Loading indicator in three sizes: the arc that inherits the color of the surrounding text (button, field, table) or the mosaic in the four house colors. Always with a label for screen readers.
Carregando pedidos
Settings
Toggles
Examples
Sizes
LoadingLoadingLoadingLoadingLoadingLoading
Inherits the color
SincronizandoSalvando rascunho
Inside a field
Loading the page
Montando o relatório de setembro
Montando o relatório de setembro…
Installation
The command creates components/ui/spinner.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add spinnerProps
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "arc" | "mosaic" | "arc" | Arc spinning in the text color, or the four small squares lighting up in a circle. |
| size | "sm" | "md" | "lg" | "md" | 14, 20 or 32px. |
| label | string | "Loading" | What is loading. Read by screen readers (role="status") even when hidden. |
| showLabel | boolean | false | Shows the label next to the spinner. |
| ...props | ComponentProps<"span"> | — | Everything a <span> accepts. The arc color comes from text-*. |