Loader

A loader indicates an unknown wait time or process duration, keeping users informed and enhancing their experience by providing visual feedback during delays.

If you are using Tailwind v4, please refer to the 2.x documentation. This documentation assumes you are using Tailwind v3.

Basic

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

Installation

If you hit any issues, make sure you check out the installation guide here.

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Anatomy

Import the components and use them as shown below, adapting the structure to fit each component.

Variants

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

Size

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

Intent

By default, the loader uses the current text color, but you can customize it with different colors.