Spinner

An animated indicator for loading states.

$ pnpm dlx shadcn@latest add https://dashral.com/r/spinner.json

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/spinner.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/spinner

Usage

example.tsx

1import { Spinner } from "@/components/dashral/spinner"
2
3<Spinner label="Loading orders" />

Examples

In context

Inside a field while a name is checked, and on a button while it syncs — each says what it's doing.

Username

dashral.com/

At least 3 characters.

“olivia” is taken. Try “olivia-hq”.

Shopify store

Last synced 2 minutes ago

API reference

Spinner

Also takes every prop of <svg>.

Prop	Type	Default
`size`	`"sm" \| "default" \| "lg" \| "xl"`	`"default"`
`label`	`string` Read by screen readers.	`"Loading"`

Accessibility

role="status" with your label.

Motion

Spins; slower with reduced motion, so it still shows something is happening.