Loader - HapplyUI

A spinning loading indicator with configurable pixel size, stroke width, and color.

Installation

bunx @happlyui/cli@latest add loader

Dependencies

Registry dependencies

These are automatically installed when you add this component.

tv

Usage

import * as Loader from "@/components/ui/loader"

<Loader.Root size={24} />

Examples

Sizes

Pass any pixel value to the size prop for precise control.

<Loader.Root size={14} />
<Loader.Root size={20} />
<Loader.Root size={24} />
<Loader.Root size={32} />
<Loader.Root size={48} />

Colors

Supports all semantic color tokens. Use 'current' to inherit from the parent text color.

<Loader.Root color="primary" />
<Loader.Root color="neutral" />
<Loader.Root color="error" />
<Loader.Root color="success" />
<Loader.Root color="warning" />
<Loader.Root color="white" />

Inline

Use a small size with the 'current' color to place loaders inline with text.

Fetching results...

Processing your request

<p className="flex items-center gap-2">
  <Loader.Root size={14} color="current" />
  Fetching results...
</p>

Custom Stroke Width

Override the auto-calculated stroke width for thinner or thicker arcs.

<Loader.Root size={32} strokeWidth={2} />
<Loader.Root size={32} strokeWidth={4} />
<Loader.Root size={32} strokeWidth={6} />

API Reference

Loader.Root

The loader component.

Prop	Type	Default	Description
`size`	`number`	`24`	The size of the loader in pixels
`strokeWidth`	`number`	`size / 8`	The stroke width of the spinner arcs. Auto-calculated from size if not provided.
`color`	`'primary' \| 'neutral' \| 'white' \| 'error' \| 'success' \| 'warning' \| 'current'`	`'primary'`	The color of the loader. Use 'current' to inherit from parent text color.
`label`	`string`	`'Loading'`	Accessible label for screen readers