Loader

Basic

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

Installation

npx shadcn@latest add @intentui/loader

Manual installation

npm i @heroicons/react

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.