Loader

A premium, dependency-free loading indicator component.

Different parts of your UI require different types of loading states. A full-page data fetch might require an indeterminate bar or pulse, while a small button state might only fit a sm size spinner or dots. This component consolidates 5 distinct, ultra-smooth animations into a single block.

Explore the different variations of the Loader component — each example shows a live preview with the exact code to copy.

Spinner

variant"spinner": is the default — a rotating arc over a faint circle. The neutral choice when you have no reason to pick another.
color: Tints the strokes, dots and borders. Takes a named key — primary, indigo, rose, emerald, zinc, blue, amber — or any #hex. Anything unrecognised falls back to primary, which follows your theme token.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Loader

npx shadcn@latest add @algorize-ui/loader

components/custom/blocks/LoaderBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Loader needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Dots

Usevariant"dots": for a staggered bouncing sequence — three dots, 0.15s apart. Stays legible at small sizes, so it reads well inline with text.

Pulse

Usevariant"pulse": for a soft breathing circle — a half-size centre dot with a full-size halo pinging behind it. The quietest of the five: no rotation, no travel.

Bar

Usevariant"bar": for an indeterminate progress line — a zinc track with a sweeping 50%-width fill on a 1.5s loop. The only non-square variant, and it renders at a fixed width, so w-full won't stretch it.

Usage

Import the component and pass your desired variant and size.

Features

Discover the Loader component's animated states, offering various spinner styles and sizes for indicating background processes.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Prop	Type	Default	Description
`variant`	`"spinner" \| "dots" \| "pulse" \| "ring" \| "bar"`	`"spinner"`	The architectural style of the loading animation.
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	Proportionally scales the container width, height, and the helper text size.
`color`	`"primary" \| "indigo" \| "rose" \| "emerald" \| "amber" \| "blue" \| "zinc" \| string`	`"primary"`	Applies the active color theme to the SVG strokes, dots, and borders. Accepts custom hex codes. Unrecognised values fall back to `"primary"`, which follows your theme's `--primary` token.
`text`	`string`	`undefined`	Optional text to display beneath the loader. It automatically receives a subtle pulsing animation.
`className`	`string`	`undefined`	Optional CSS classes to apply to the outermost wrapper container.