Loader

Basic

This is the basic loader component, used to indicate that a process or action is currently taking place.

Installation

Install the component via the CLI in one command.

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 install @heroicons/react

Anatomy

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

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

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.