Docs/Spinner

Spinner

Loading spinner with rotating animation. 3 sizes.

Usage

tsx

1import { Spinner } from '@storm-ds/ui'
2
3<Spinner />

Sizes

With Text

tsx

1<div className="flex items-center gap-2">
2  <Spinner size="sm" />
3  <span>Loading...</span>
4</div>

Overlay

tsx

1<div className="relative w-64 h-32 bg-storm-background border border-storm-border rounded-lg flex items-center justify-center">
2  <Spinner />
3</div>

In Button

tsx

1<Button disabled>
2  <Spinner size="sm" className="mr-2 inline" />
3  Processing...
4</Button>

Props

Prop	Type	Default	Description
size	'sm' \| 'md' \| 'lg'	'md'	Spinner size
className	string	-	Custom classes

Use with AI

Create a Next.js component using Storm UI's Spinner for loading states. Import: `import { Spinner } from '@storm-ds/ui'`. Sizes: sm, md, lg. Displays an animated rotating spinner using CSS animations. Use in buttons for async actions, overlays for full-page loads, or alongside text for loading messages. The spinner uses Storm colors and is customizable via className. Example: `<Spinner />`, `<Spinner size="sm" />`, combine with text or in buttons during loading states

Progress

Table