Installation
npm
pnpm
yarn
bun
npx shadcn@latest add @dotui/loaderUsage
import { Loader } from '@/components/ui/loader'<Loader />Accessibility
Loader renders a React Aria ProgressBar and has no visible text, so pass aria-label to name the operation for screen readers.
<Loader aria-label="Loading" />Examples
Basic
In Button
In Input
Loading Overlay
Loading content...
API Reference
A loader displays an animated spinner that indicates an operation is in progress.
| Prop | Type | Default | |
|---|---|---|---|
number | 20 | ||
number | 2 | ||
number | 0.8 | ||
number | 0.25 | ||
boolean | — | ||
number | 0 | ||
ReactNode | — | ||
ReactNode | function | — | ||
NumberFormatOptions | { style: 'percent' } | ||
Last updated on 7/9/2026