Statuses

Loader

A lightweight and visually appealing loading indicator that enhances user experience by signaling ongoing background processes and providing visual feedback.

Installation

Install the component via the CLI in one command.

npm

pnpm

yarn

bun

npx shadcn@latest add @intentui/loader

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm

pnpm

yarn

bun

npm install @heroicons/react tailwind-merge

Anatomy

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

<>
  <Loader variant="ring" />
  <Loader variant="spin" />
  <Loader variant="bars" />
</>

Examples

Variants

There are four different variants of the loader. The default variant is the ring-3.

Size

The loader defaults to a small size, but you can also select medium, large, or extra-large.

Component API

The Loader component displays loading feedback.

Prop	Type	Default
`formatOptions`	`Intl.NumberFormatOptions`	-
`isIndeterminate`	`boolean`	`true`
`percentage`	`number`	-
`variant`	`keyof typeof LOADERS`	-

Unlock the full power of
Intent UI Design

Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.

Learn more

Badge

Meter