Spin animation (loading) in Tailwind - Mini Project: Build & Apply

Spin animation (loading) with Tailwind CSS

📖 Scenario: You are building a simple web page that shows a loading spinner while content is loading. This spinner should rotate continuously to indicate progress.

🎯 Goal: Create a spinning loading animation using Tailwind CSS classes on a simple HTML element.

📋 What You'll Learn

Use Tailwind CSS utility classes to create a spinner

Apply the built-in spin animation class

Use semantic HTML with a div element for the spinner

Make sure the spinner is visible and centered on the page

Add accessible text for screen readers

💡 Why This Matters

🌍 Real World

Loading spinners are common on websites and apps to show users that something is happening in the background.

💼 Career

Knowing how to create accessible and visually appealing loading animations is useful for frontend web developers and UI designers.

1

Create the HTML skeleton with a container

Create a basic HTML5 skeleton with lang="en", meta charset="UTF-8", and a body containing a div with the class flex and justify-center to center content horizontally.

Tailwind

    
    Loading Spinner


    
        
    

Need a hint?

Start with a simple HTML page and add a container div with Tailwind classes flex and justify-center inside the body.

2

Add the spinner element with size and border

Inside the centered div, add another div with Tailwind classes w-12, h-12, border-4, border-gray-300, and rounded-full to create a circle with a border.

Tailwind

    
    Loading Spinner


    
        
            
        
    

Need a hint?

Add the size and border classes to the inner div to form a circle shape with a gray border.

3

Add the spin animation and colored border segment

Add the Tailwind class animate-spin to the spinner div. Also add border-t-blue-500 to color the top border blue, so the spinner looks like it is spinning.

Tailwind

    
    Loading Spinner


    
        
            
        
    

Need a hint?

Use Tailwind's animate-spin class to make the spinner rotate. Color the top border with border-t-blue-500 for the spinning effect.

4

Add accessible text for screen readers

Inside the spinner div, add a span with the class sr-only and the text Loading... to provide accessible text for screen readers.

Tailwind

    
    Loading Spinner


    
        
            
        
    

Need a hint?

Add a span with class sr-only inside the spinner div to provide text for screen readers.