Spinner
Installation
Install the following dependencies
npm install clsxCopy and paste the following code into your project
primitives/spinner/index.tsx
import { clsx } from 'clsx';export interface SpinnerProps { size?: 'xs' | 'sm' | 'md' | 'lg'; loadingAriaLabel?: string;}/** * This component supports various CSS variables for theming. Here's a comprehensive list, along * with their default values: * * ```css * :root { * --spinner-base: var(--contrast-100); * --spinner-ring: var(--primary-shadow); * } * ``` */export function Spinner({ size = 'sm', loadingAriaLabel = 'Loading...' }: SpinnerProps) { return ( <span aria-label={loadingAriaLabel} className={clsx( 'box-border inline-block animate-spin rounded-full border-(--spinner-base,var(--contrast-100)) border-b-(--spinner-ring,var(--primary-shadow))', { xs: 'h-5 w-5 border-2', sm: 'h-6 w-6 border-2', md: 'h-10 w-10 border-[3px]', lg: 'h-14 w-14 border-4', }[size], )} role="status" /> );}Usage
import { Spinner } from '@/vibes/soul/primitives/spinner';function Usage() { return ( <Spinner size="lg" /> );}API Reference
SpinnerProps
| Prop | Type | Default |
|---|---|---|
size | 'xs' | 'sm' | 'md' | 'lg' | 'sm' |
loadingAriaLabel | string | 'Loading...' |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --spinner-base: var(--contrast-100); --spinner-ring: var(--primary-shadow);}