- Accordion
- Avatar
- Badge
- Breadcrumb
- Button
- Calendar
- Checkbox
- Combobox
- Container
- CurrencyInput
- DistributionSlider
- Drawer
- Dropdown
- Grid
- Heading
- Image
- Input
- InputGroup
- Label
- Logo
- MapPin
- Modal
- NativeSelect
- NumberInput
- OtpInput
- PhoneInput
- Popover
- Progress
- PropertyCalendar
- RadioGroup
- RadioGroupCards
- ResponsiveModal
- ScrollArea
- SearchBar
- SearchBarFallback
- SearchInput
- Select
- Separator
- Spinner
- Switch
- Tabs
- Text
- Textarea
- Toast
- Toggle
- ToggleGroup
- Tooltip
Spinner
Loading indicator with animation
pnpm add @wandercom/design-system-web
import { Spinner } from '@wandercom/design-system-web/ui/spinner';
export function Example() {
return <Spinner />;
}The spinner uses a conic gradient animation to create a gradient loading effect. It automatically adapts to our theme's primary color.
Loading example...
The default size is 16px (size-4). While no other fixed sizes are defined yet, you can customize the size using the className prop:
<Spinner className="size-6" />
<Spinner className="size-8" />
<Spinner className="size-12" />className
string
Additional CSS classes for customization.