Loaders

Five tiny CSS loading indicators — dots, pulse, orbit, bars and spinner.

1.6 KB gzipped
Zero dependencies
Reduced-motion safe
Base UI & Radix compatible

Dots

Pulse

Orbit

Bars

Spinner

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/loaders.json

Adds components/velora/loaders.tsx.

Examples

In context

Loaders inside buttons, a typing bubble, an upload row, a live badge and an empty card.

Buttons

AL

q3-report.pdf

Uploading · 2.4 of 6.1 MB

Production

api.example.com

Live

Crunching this week’s numbers

Props

DotsLoader

Prop	Type	Default
`size` Overall size: sm = 16px, md = 24px, lg = 32px	`LoaderSize`	`"md"`
`label` Text read by screen readers (visually hidden)	`string`	`"Loading"`

Also accepts every <span> attribute, forwarded to the root element.

PulseLoader

Prop	Type	Default
`size` Overall size: sm = 16px, md = 24px, lg = 32px	`LoaderSize`	`"md"`
`label` Text read by screen readers (visually hidden)	`string`	`"Loading"`

Also accepts every <span> attribute, forwarded to the root element.

OrbitLoader

Prop	Type	Default
`size` Overall size: sm = 16px, md = 24px, lg = 32px	`LoaderSize`	`"md"`
`label` Text read by screen readers (visually hidden)	`string`	`"Loading"`

Also accepts every <span> attribute, forwarded to the root element.

BarsLoader

Prop	Type	Default
`size` Overall size: sm = 16px, md = 24px, lg = 32px	`LoaderSize`	`"md"`
`label` Text read by screen readers (visually hidden)	`string`	`"Loading"`

Also accepts every <span> attribute, forwarded to the root element.

SpinnerLoader

Prop	Type	Default
`size` Overall size: sm = 16px, md = 24px, lg = 32px	`LoaderSize`	`"md"`
`label` Text read by screen readers (visually hidden)	`string`	`"Loading"`

Also accepts every <span> attribute, forwarded to the root element.

LoaderSize

type LoaderSize = "sm" | "md" | "lg";

Accessibility

Reduced motion: Bouncing, spinning and rippling stop; each loader holds its shape and fades gently in and out on a 2-second cycle instead.
Keyboard: Decorative — nothing to operate.
Screen readers: Each loader is role="status" with a visually hidden label ("Loading" by default); pass aria-hidden when nearby text already says what is happening.