Morph loaderPro
Tiny loaders that morph between shapes and fold into a check or a cross when done.
Live · keyboard ready
Loading
- Inline progress inside a button, row, or field where the result should appear in the same spot.
- Short operations that end in a clear success or failure, such as save, publish, or upload.
- Any spinner where a tiny, crisp, brand-consistent mark matters.
- Use progress when the percentage is known.
- Use skeleton when content is loading into a layout.
- Use action-button when the whole button should morph its label too.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { MorphLoader } from "@/registry/components/morph-loader/morph-loader"; export function PublishStatus({ state }: { state: "loading" | "success" | "error" }) { return <MorphLoader variant="ring" status={state} size={20} successLabel="Published" errorLabel="Publish failed" />;}MorphLoader
A tiny loader drawn from four strokes that morph between dots, bars, ring, and square shapes, then into a check or a cross when status changes.
PropTypeDefaultDescription
variant"dots" | "bars" | "ring" | "square""dots"Loading shape. Changing it while loading morphs the strokes into the new shape.status"loading" | "success" | "error""loading"success folds the strokes into a check, error into a cross, loading gathers them back.sizenumber24Rendered size in px. The drawing uses a 24 unit grid.strokeWidthnumber2.5Stroke thickness in grid units for ring, square, check, and cross.tonebooleantrueColors the check with --success and the cross with --danger. Off keeps currentColor.labelstring"Loading"Announced while loading.successLabelstring"Done"Announced on success.errorLabelstring"Failed"Announced on error.decorativebooleanfalseDrops the status role and text, for loaders inside a control that announces its own state.classNamestring–Extra class on the root.styleCSSProperties–Inline styles on the root.- The root is role="status" with visually hidden text that changes to label, successLabel, or errorLabel.
- The drawing is aria-hidden; completion is never shown by color alone because the shape becomes a check or a cross.
- Set decorative inside buttons that already announce progress, so the state is not read twice.
- Each stroke is a center, length, direction, bend, and width, each on its own spring, so any shape can morph into any other and interruptions keep velocity.
- Dots bounce in a wave, bars grow in sequence, the ring turns while its arcs breathe, and the square tumbles a quarter turn at a time while its corners open.
- On success or error the loop fades, the drawing turns forward to upright, the strokes draw the mark in order, and the mark pops once.
- Reduced motion shows a static shape per state and swaps instantly.
- Vector drawing at any size; 16 to 32px suit inline use and 48px or more suit empty states.
- The footprint is fixed to size, so state changes never shift layout.
- Four SVG paths; one animation frame loop runs only while loading or settling.
- Path data is built from motion values without React renders.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Drive it with one prop: set status from your request state. Keep variant fixed per product for consistency.
- It inherits currentColor, so place it inside buttons and text without extra styling.
- At 16px use strokeWidth 3 for weight that matches 1.75px icon strokes.
- Return status to loading to reuse the same loader for the next request; the strokes gather back into the variant.
The full library index for assistants is at /llms.txt.