Spinners

Border Spinner

Lightweight loading indicator with border animation

Growing Spinner

Repeatedly grows and fades the spinner

Colored Spinners
Border Spinner Colors

Border spinners with different color variants

Growing Spinner Colors

Growing spinners with different color variants

Spinner Sizes
Border Spinner Sizes

Small, default, and custom sized spinners

Small

Default

Large (3rem)

Extra Large

Growing Spinner Sizes

Small, default, and custom sized growing spinners

Small

Default

Large (3rem)

Extra Large

Spinners in Buttons
Border Spinner in Buttons

Loading state indicators for buttons

Growing Spinner in Buttons

Alternative loading style for buttons

Alignment & Placement
Flex Alignment

Center spinners using flexbox utilities

Text Alignment

Center spinners using text alignment utilities

Left aligned
Center aligned
Right aligned
Real-World Examples
Loading Card

Card with loading overlay

Card Content

This content is being loaded...

Loading content...

Loading Table

Table with loading state

Name Email Status
Loading data...
Page Loading Overlay

Full page loading indicator example

Loading, please wait...

This may take a few moments

Inline Loading States

Spinners used inline with content

  • Checking server status...
  • Verifying credentials...
  • Database connection Connected
  • Loading user profile...
Form Submission

Loading state during form submission

Multiple Spinners

Creative loading animations with multiple spinners

Growing Dots

Rainbow Loading

Concentric Spinners

Search Results Loading

Loading state for search or filter operations

Searching for "bootstrap"...

Widget Loading

Loading state for dashboard widgets

Revenue

Orders

Users

Visits