Spinner

Customize
Color
Track color
Dots12
Size24
Duration1.2
Tail length0.40

Installation

pnpm dlx shadcn@latest add @clover-ui/spinner

Usage

import { Spinner } from "@/components/spinner";

<Spinner color="#0B87DA" size={24} />

By default you can click it or press Space to pause and play. Set interactive={false} to turn that off.

Props

PropType
Default"#0B87DA"

Color of the resting dots.

Default"rgba(11, 135, 218, 0.15)"

Width and height in pixels.

Default24
Default12

Defaults to 16% of size.

Seconds per lap.

Default1.2

Tail length, from 0 to 1.

Default0.4
Defaulttrue
Defaulttrue