Usage
import { Spinner } from "chakra-ui-solid";<Spinner />Examples
Sizes
Use the size prop to change the size of the spinner.
Colors
Use the colorPalette prop to change the color scheme of the spinner.
Custom Color
Use the color prop to pass a custom color to the spinner.
Track Color
Use the --spinner-track-color variable to change the color of the spinner’s track.
Custom Speed
Use the animationDuration prop to change the speed of the spinner.
Thickness
Use the borderWidth prop to change the thickness of the spinner.
Label
Compose the spinner with a label to provide additional context.
Loading...
Overlay
Compose spinner with the Center component to overlay the spinner on top of another component.
Some heading text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac consectetur libero, id ultricies urna. Sed ac consectetur libero, id fames ac ante ipsum primis in faucibus.
Props
| Prop | Default | Type |
|---|---|---|
size | 'md' | ConditionalValue<'inherit' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | PresetVariant<'spinner', 'size'>>The diameter, as a scale step. `inherit` takes `1em` from the surrounding font size, which is how a spinner inside a button matches its label. |
Plus HTMLChakraProps<"span"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.