Update v4.2 - New components, 10+ framework guides, and quality improvements. Visit Changelog

........ Github
Figma X (Twitter)

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

Default spinner

Use a basic spinner to indicate that content or an action is loading.

SVG spinner New

Use the two-tone SVG spinner for a more polished loading state.

Throbber New

A segmented circular stroke that rotates with Tailwind’s animate-spin.

Ring New

A hollow ring with a soft animate-ping echo.

Pulse dot New

A single dot that scales in and out on a loop (custom keyframes).

Wave New

Vertical bars with staggered scale animation (custom keyframes).

Bars New

Three bars with a rhythmic scale animation (custom keyframes).

Terminal New

A terminal-style prompt with a blinking block caret.

Blinking caret New

The word “Loading” with a blinking block caret.

Shimmer text New

Gradient text with a moving highlight (custom keyframes and utility class).

Loading dots New

“Loading” followed by three dots that jump in sequence (custom keyframes).

Ellipsis New

Three dots only, staggered vertical jump (same keyframes as Loading dots).

Typing dots New

Animated typing dots for chat, messaging, or streaming-style loading states.

Color variants

Apply color variants to match different states or interface themes.

Sizes

Use a small spinner inline with text, the default size for cards or sections, and the large size for page-level loading states.

Inside a card

Place a spinner inside a card while its content is loading.

Spinner with description

Pair a spinner with descriptive text when users need more context about what is loading.

© 2026 Preline Labs.