components
Tailwind CSS Loading
The loading animation visually indicates that a process is currently in progress.
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, md, lg or xl.
<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>
<span class="loading loading-spinner loading-xl"></span>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>
<span class="loading loading-dots loading-xl"></span>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>
<span class="loading loading-ring loading-xl"></span>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>
<span class="loading loading-ball loading-xl"></span>Use the modifier class loading-bars 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>
<span class="loading loading-bars loading-xl"></span>Use the modifier class loading-infinity 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>
<span class="loading loading-infinity loading-xl"></span>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>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>Below are the examples illustrating the integration of loading animations within alerts.
Primary alert: Welcome to our platform! Explore our latest features and updates.
Success alert: Explore our recent achievements and upcoming events.
<div class="alert alert-primary border-0 flex items-center gap-4" role="alert">
<span class="icon-[tabler--alert-triangle] size-5"></span>
<p> <strong>Primary alert:</strong> Welcome to our platform! Explore our latest features and updates. </p>
<div class="bg-base-100/50 absolute rounded-box 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 border-0 flex items-center gap-4" role="alert">
<span class="icon-[tabler--circle-check] size-5"></span>
<p> <strong>Success alert:</strong> Explore our recent achievements and upcoming events. </p>
<div class="bg-base-100/50 absolute rounded-box 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>Below is the example illustrating the integration of loading animations within cards.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
<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>