Tailwind CSS Loading

Class Name	Type	Description
loading	Component	Base class for loading component.
loading-spinner	Modifier	Shows the spinner animation.
loading-dots	Modifier	Shows the dots animation.
loading-ring	Modifier	Shows the ring animation.
loading-ball	Modifier	Shows the ball animation.
loading-bars	Modifier	Shows the bars animation.
loading-infinity	Modifier	Shows the infinity animation.
loading-xs	Responsive	Makes the loading component extra small.
loading-sm	Responsive	Makes the loading component small.
loading-lg	Responsive	Makes the loading component large.
text-{semantic-color}	Utility	Use to create loading with different colors.

The standard format for loading is component class loading, accompanied by modifier class loading-spinner to show the spinner animation. The size of the spinner can be adjusted using the responsive classes loading-{size} where {size} can be xs, sm, or lg.

<span class="loading loading-spinner loading-xs"></span>
<span class="loading loading-spinner loading-sm"></span>
<span class="loading loading-spinner"></span>
<span class="loading loading-spinner loading-lg"></span>

Loading dots

Use the modifier class loading-dots for loading with dots animation.

<span class="loading loading-dots loading-xs"></span>
<span class="loading loading-dots loading-sm"></span>
<span class="loading loading-dots"></span>
<span class="loading loading-dots loading-lg"></span>

Loading rings

Use the modifier class loading-ring for loading with growing rings animation.

<span class="loading loading-ring loading-xs"></span>
<span class="loading loading-ring loading-sm"></span>
<span class="loading loading-ring"></span>
<span class="loading loading-ring loading-lg"></span>

Loading balls

Use the modifier class loading-ball for loading with jumping balls animation.

<span class="loading loading-ball loading-xs"></span>
<span class="loading loading-ball loading-sm"></span>
<span class="loading loading-ball"></span>
<span class="loading loading-ball loading-lg"></span>

Loading bars

Use the modifier class loading-dots for loading with bars animation.

<span class="loading loading-bars loading-xs"></span>
<span class="loading loading-bars loading-sm"></span>
<span class="loading loading-bars"></span>
<span class="loading loading-bars loading-lg"></span>

Loading infinity

Use the modifier class loading-dots for loading with infinity animation.

<span class="loading loading-infinity loading-xs"></span>
<span class="loading loading-infinity loading-sm"></span>
<span class="loading loading-infinity"></span>
<span class="loading loading-infinity loading-lg"></span>

Colors

Colored spinners

Utilize the text utility class text-{semantic-color} to create loading animations with different colors, each corresponding to specific modifiers.

<span class="loading loading-spinner text-primary"></span>
<span class="loading loading-spinner text-secondary"></span>
<span class="loading loading-spinner text-accent"></span>
<span class="loading loading-spinner text-neutral"></span>
<span class="loading loading-spinner text-info"></span>
<span class="loading loading-spinner text-success"></span>
<span class="loading loading-spinner text-warning"></span>
<span class="loading loading-spinner text-error"></span>

Illustrations

Within buttons

Below are the examples illustrating the integration of loading animations within buttons.

<button class="btn btn-primary btn-square btn-disabled" aria-label="Loading Button">
<span class="loading loading-spinner loading-sm"></span>
</button>
<button class="btn btn-primary btn-disabled">
<span class="loading loading-spinner loading-sm"></span>
<span>Loading...</span>
</button>
<button class="btn btn-success btn-square btn-disabled" aria-label="Loading Button">
<span class="loading loading-ring loading-sm"></span>
</button>
<button class="btn btn-success btn-disabled">
<span>Ping</span>
<span class="loading loading-ring loading-sm"></span>
</button>

Within alerts

Below are the examples illustrating the integration of loading animations within alerts.

<div class="alert alert-primary flex items-center gap-4" role="alert">
  <span class="alert-icon">
    <span class="icon-[tabler--alert-triangle] size-5"></span>
  </span>
  <p> <strong>Primary alert:</strong> Welcome to our platform! Explore our latest features and updates. </p>
  <div class="bg-base-100/50 absolute start-0 top-0 size-full"></div>

  <div class="absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
    <span class="loading loading-spinner"></span>
  </div>
</div>

<div class="alert alert-success flex items-center gap-4" role="alert">
  <span class="alert-icon">
    <span class="icon-[tabler--circle-check] size-5"></span>
  </span>
  <p> <strong>Success alert:</strong> Explore our recent achievements and upcoming events. </p>
  <div class="bg-base-100/50 absolute start-0 top-0 size-full"></div>

  <div class="absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
    <span class="loading loading-spinner"></span>
  </div>
</div>

Within cards

Below is the example illustrating the integration of loading animations within cards.

<div class="card group max-w-sm hover:shadow">
  <figure>
    <img src="https://cdn.flyonui.com/fy-assets/components/carousel/image-7.png" alt="Album" class="transition-transform duration-500 group-hover:scale-105" />
  </figure>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p> This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. </p>
  </div>
  <div class="card-footer">
    <small class="text-base-content/50">Last updated 3 mins ago</small>
  </div>
  <div class="bg-base-100/50 absolute start-0 top-0 size-full"></div>
  <div class="absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
    <span class="loading loading-spinner loading-lg text-primary"></span>
  </div>
</div>

FlyonUI