Day 11: How to Create Animated Spinners Using Tailwind CSS

Welcome to Day 11 of 15 Days of Tailwind Tips

As we get deeper into this series, we’re now shifting from layout and styling basics into micro-interactions and motion. Today’s focus is on building smooth, CSS-based loading spinners using Tailwind’s animation utilities — no JavaScript or external libraries required.

Whether you're displaying a loader for an API call or showing a placeholder while data loads, spinners enhance user feedback. Tailwind makes this easier than you might expect.

Basic Spinner with animate-spin

The most straightforward spinner you can create in Tailwind CSS uses the built-in animate-spin utility.

<div class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div> 

• w-8 h-8: Sets the spinner size
• border-4: Adds thickness to the circle
• border-blue-500: Sets the color of the spinner
• border-t-transparent: Makes the top portion transparent for a rotating illusion
• rounded-full: Turns the element into a circle
• animate-spin: Applies a continuous 360° rotation

This results in a lightweight, circular loading spinner that spins infinitely.

Customizing the Spinner Speed

By default, animate-spin uses Tailwind’s base animation duration. You can customize this by writing your own animation using @keyframes or tweaking Tailwind's config, but here's a quick inline trick:

<div class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin [animation-duration:0.75s]"></div> 

• [animation-duration:0.75s]: Overrides the default spin speed directly using Tailwind’s arbitrary values feature.

You can experiment with different speeds like 1s, 1.5s, or even 2s for slower spinners.

Change Spinner Size Responsively

Tailwind’s responsive utility support also works with spinners.

<div class="w-6 h-6 sm:w-8 sm:h-8 md:w-10 md:h-10 border-4 border-green-500 border-t-transparent rounded-full animate-spin"></div> 

This allows the spinner to scale across different screen sizes.

Add Margin and Centering

You’ll often want to center your spinner either inside a container or across the full page.

<div class="flex items-center justify-center min-h-screen bg-gray-100"> <div class="w-10 h-10 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div> </div> 

Combining flex, items-center, and justify-center places the spinner neatly in the middle of the screen — a common requirement for full-page loaders.

Accessible Loading Spinner

It’s a good practice to mark loaders with accessible text (even if hidden) so screen readers can recognize them.

<div role="status"> <div class="w-6 h-6 border-4 border-gray-400 border-t-transparent rounded-full animate-spin"></div> <span class="sr-only">Loading...</span> </div> 

• role="status": Announces a dynamic change to assistive tech
• sr-only: Hides the text visually but keeps it readable by screen readers

Advanced Tips & Tricks

Once you understand the basic mechanics of Tailwind spinners, you can go further with creative enhancements:

1. Dual-Ring Spinner with Inner Circle

<div class="relative w-10 h-10"> <div class="absolute inset-0 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div> <div class="absolute inset-2 border-4 border-blue-200 border-t-transparent rounded-full animate-spin [animation-duration:1.5s]"></div> </div> 

Creates a layered spinner with two concentric rings rotating at different speeds for a sleek effect.

2. Delayed Start Spinner (Staggered Effects)

<div class="w-10 h-10 border-4 border-emerald-500 border-t-transparent rounded-full animate-spin [animation-delay:0.5s]"></div> 

Using [animation-delay] you can stagger animations if using multiple spinners in sequence.

3. Color-Shifted Spinner Using animate-[spin_1s_linear_infinite]

<div class="w-10 h-10 border-4 border-gradient-to-r from-pink-500 to-yellow-500 border-t-transparent rounded-full animate-[spin_1s_linear_infinite]"></div> 

With Tailwind’s custom animation syntax, you can enhance animations with gradient borders (works well in modern browsers).

4. Animate Visibility for Mounting Loaders

Combine Tailwind’s opacity transitions to animate a spinner in/out of view:

<div class="w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin transition-opacity duration-500 opacity-0 group-hover:opacity-100"></div> 

This is useful when loaders appear after a button click or hover.

5. Custom Animation Keyframes (Tailwind Config)

You can define your own spin animations in tailwind.config.js:

module.exports = { theme: { extend: { animation: { slowspin: 'spin 2s linear infinite', }, }, }, } 

And use it as:

<div class="w-8 h-8 border-4 border-teal-500 border-t-transparent rounded-full animate-slowspin"></div> 

Gives you full control over the motion design of your app.

Conclusion

Tailwind CSS allows you to build elegant, animated loading spinners with just a few utility classes — no need for external libraries or JavaScript. From simple circular loaders to advanced, multi-layered designs, you can create responsive, accessible, and visually polished spinners that enhance user experience without complicating your codebase.

As you continue building more interactive applications, understanding how to build micro-interactions like spinners will come in handy — whether you're handling loading states, transitions, or even UI skeletons.

In the next post, we’ll dive into Tailwind’s dark mode support — how to structure your themes, toggle styles dynamically, and build light/dark UI components that just work.