caliper uidocs
DemoSign inGet Pro

Loader

Free

A small indeterminate indicator in four shapes.

Installs components/ui/loader.tsxDepends on none beyond ReactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/loader.json

When to use #

Use it for

  • Short waits where there is nothing measurable to show.
  • Inline beside a label or inside a control.

Skip it when

  • You can show real progress; use a progress bar.
  • A whole region is loading; use a skeleton.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/loader.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { Loader } from "@/components/ui/loader"

export function LoaderShapes() {
  return (
    <div className="flex items-center gap-8">
      <Loader variant="spinner" />
      <Loader variant="dots" />
      <Loader variant="bars" />
      <Loader variant="morph" />
    </div>
  );
}

API reference #

Loader

component

Also accepts the native props of its root element and a ref.

PropTypeDefault
variantLoaderVariant"spinner"
sizenumber20
labelstring"Loading"

Accessibility #

It exposes status semantics, with aria-label kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.