Loader

Show ongoing work when its completion is unknown.

Preview

Default

Design guidance

Use Loader when the amount of work is unknown. Use Progress when you can measure completion, or Skeleton when the loading content has a known layout. Name the pending task beside the loader.

All types inherit their color and stop animating when reduced motion is requested. The glyph is decorative by default. Use label for a standalone loader with no nearby status text. Remove the loader when the operation finishes or is cancelled.

Installation

Install

No source.

Download example files — JSX recipes, demo styles and any sample assets. Install the component first.

Basic usage

12345import { Loader } from "@/components/ui/loader";

<div role="status">
<Loader type="petals" size="sm" /> Checking sources
</div>

Structures

Loader is a leaf SVG glyph. Give a standalone status a non-empty label; omit it when nearby text already names the pending task, such as inside a named button.

type selects the shape. Every type shares the same size and accessibility contract. Native SVG children can replace the geometry; the Spinner type supplies rotation. Keep placement and request state in the parent.

Examples

Shape and size

Type

Choose a shape. Spinner rotates an arc; the other types fade their segments in sequence.

Sizes

Compare each type at Small, Default, and Large: 16, 20, and 24 pixels.

Placement

Inline

Keep a short source check in the reading flow. Cancel removes the loader; Check again restores it.

These examples start in their loading state. They show local UI states and sample data; they do not call an AI service.

Button

Show a pending action and prevent a second request.

Badge

Keep a background task status compact.

Input group

Place Loader in an Input group addon while searching. Edit the query to filter local sample documents.

Empty state

Show a source search before results arrive. Keep its status and cancel action visible.

Overlay

Cover a summary while it refreshes. Cancel removes the cover and restores access to the Card.

Workflow recipes

Application loading

API reference

Loader properties
Prop	Type	Default	Description
`type`	`"spinner" \| "petals" \| "dots" \| "flower" \| "orbit" \| "bars"`	`"spinner"`	Spinner: rotating arc. Petals: eight outward ovals. Dots: eight circles. Flower: six teardrops. Orbit: eight sideways ovals. Bars: twelve rounded bars.
`size`	`"sm" \| "default" \| "lg" \| number`	`"default"`	Named sizes are 16, 20, and 24 pixels. A positive finite number sets a custom pixel size; invalid numbers fall back to 20.
`label`	`string`		A non-empty label sets role=status and aria-label. Omit beside an existing status message.
`children`	`React.ReactNode`		Optional custom SVG geometry in the default 24 × 24 viewBox. Replaces the built-in shape.
`ref / native SVG props / className / style`	`React SVG props`		Forwarded to the svg. Decorative mode sets aria-hidden.

Generating an answer