Spinner
Loading spinner with size variants.
import { Spinner } from '@ybouhjira/hyperkit';#Playground
Edit the code — the preview recompiles and re-renders as you type.
Loading preview…
#More Examples
Small
<Spinner size="sm" />Large
<Spinner size="lg" />#Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | SpinnerSize | 'md' | Size preset. |
color | SpinnerColor | 'primary' | Color variant. |
label | string | 'Loading' | Accessible label for screen readers. |
class | string | — | Additional CSS classes. |
unstyled | boolean | false | Remove all default styling classes. |
#Design Tokens
This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.
--sk-accent--sk-border--sk-duration-normal--sk-spinner-border-width--sk-spinner-color--sk-spinner-track-color--sk-text-muted--sk-text-on-accent--sk-text-secondary