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.

Basic usage

Example

A simple loading status.

Color variants

Predefined spinner color styles.

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.

Inside a card

Spin in a card.

Customized description

Customized description content.

Attention needed

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