1. Components
  2. Spinners

Components

Tailwind CSS Spinners (Loaders)

Spinner Tailwind CSS component indicates a loading state using a rotating circle animation. A visual cue for loading pages, cards, components, forms, etc.

Example

A simple loading status.

Loading...

Color variants

Predefined spinner color styles.

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Sizes

A small size is good for loading text, default sized spin for loading a card-level block, and large spin used for loading a page.

Loading...
Loading...
Loading...

Inside a card

Spin in a card.

Loading...

Customized description

Customized description content.

Attention needed

Holy guacamole! You should check in on some of those fields below.
Loading...