Browse components
Thunder Loader
A lightning bolt that charges up in stuttering surges while arcs crackle around it, then flashes white, throws sparks and discharges. Pass progress for a determinate meter.
Installation
npx shadcn@latest add @glint-ui/thunder-loaderFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/thunder-loader.json
Usage
import { ThunderLoader } from "@/components/ui/thunder-loader";
<ThunderLoader size={64} />
<ThunderLoader progress={uploadPct} label="Uploading" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 96 | Px. |
| color | string | "#facc15" | Charge color. |
| speed | number | 1 | Cycle speed multiplier. |
| label | string | "Charging" | Screen reader text. |
| progress | ReactNode | — | 0-100 to show a determinate charge (role=progressbar). Omit to loop. |
| className | string | — | Extra classes for the root element. |