Spinner
A visual indicator used to represent a loading state or an ongoing process.
Usage
The Spinner component provides visual feedback to users that a task is in progress.
Examples
Sizes
Use the size prop to adjust the size of the spinner.
Custom Icon
You can provide a custom icon or any other content to be animated by the spinner. The Spinner component will automatically apply the spinning animation to its direct SVG child.
API Reference
The Spinner component is a styled ark.span and accepts all standard HTML span props in addition to the following variants:
| Prop | Type | Default |
|---|---|---|
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' |
| colorPalette | 'accent' | 'neutral' | 'success' | 'warning' | 'destructive' | 'accent' |
| speed | 'slow' | 'normal' | 'fast' | 'normal' |