Browse components
Modern Loader
A gradient comet arc orbits with a glowing head while the ring breathes between circle and squircle, around a counter-spinning inner arc and a morphing core.
Installation
npx shadcn@latest add @glint-ui/modern-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/modern-loader.json
Usage
import { ModernLoader } from "@/components/ui/modern-loader";
<ModernLoader size={64} colors={["#22d3ee", "#a855f7"]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 96 | Px. |
| colors | string[] | ["#22d3ee","#a855f7","#f43f5e"] | Arc gradient stops, tail to head. |
| thickness | number | 6 | Ring thickness in px. |
| speed | number | 1 | Speed multiplier. |
| label | string | "Loading" | Screen reader text. |
| className | string | — | Extra classes for the root element. |