Open In App

Create spinner in Tailwind CSS

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

A spinner or loading indicator is an important element in user interfaces, used to show that content is being loaded. We will create a CSS-based spinner using Tailwind CSS, a popular utility-first CSS framework.

Prerequisites

Approach

We will approach this task by using Tailwind CSS classes to style an HTML div element and create the illusion of a spinner by applying animations. The spinner will consist of:

  • Circular shape: Created using the rounded-full class for border-radius.
  • Border and animation: Using utility classes to control the size, border style, and animations (border-t-transparent, animate-spin).

You can add the following CDN link in the <head> section:

 <script src="https://cdn.tailwindcss.com/3.4.16"></script>

Example 1: This basic spinner uses Tailwind CSS to create a circular loading animation with a blue border and a transparent top. It spins continuously with the animate-spin class, centered on a light gray background.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Spinners with Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com/3.4.16"></script>
</head>

<body class="flex items-center 
             justify-center 
             h-screen bg-gray-100">
    <div id="spinner-container" class="space-y-10">
        <!-- Spinners will go here -->
        <div class="flex justify-center">
            <div class="w-16 h-16 border-4 border-blue-500
                        border-t-transparent rounded-full 
                        animate-spin">
            </div>
        </div>

    </div>
</body>

</html>

Output:

Screen-Recording-2024-09-24-214617
basic spinner

Example 2: This code creates a blue circular spinner with a pulsing animation (animate-ping) using Tailwind CSS, centered on a light gray background.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Spinners with Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com/3.4.16"></script>
</head>

<body class="flex items-center justify-center
             h-screen bg-gray-100">
    <div id="spinner-container" class="space-y-10">
        <!-- Spinners will go here -->
        <div class="flex justify-center">
            <div class="w-16 h-16 bg-blue-500
                        rounded-full animate-ping">
            </div>
        </div>


    </div>
</body>

</html>

Output:

Screen-Recording-2024-09-24-215556
Pulsing Spinner

Example 3: This code creates a bouncing animation with three small blue circles using Tailwind CSS, aligned in a row with staggered bounce effects.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Spinners with Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com/3.4.16"></script>
</head>

<body class="flex items-center justify-center h-screen bg-gray-100">
    <div id="spinner-container" class="space-y-10">
        <!-- Spinners will go here -->
        <div class="flex justify-center space-x-1">
            <div class="w-4 h-4 bg-blue-500
                        rounded-full animate-bounce">
            </div>
            <div class="w-4 h-4 bg-blue-500
                        rounded-full animate-bounce
                        delay-100">
            </div>
            <div class="w-4 h-4 bg-blue-500
                        rounded-full animate-bounce
                        delay-200">
            </div>
        </div>


    </div>
</body>

</html>

Output:

Screen-Recording-2024-09-24-215825
Dotted Spinner

Example 4: This code creates a loading spinner with four vertical bars of different colors (blue, green, red, yellow) using Tailwind CSS, where each bar pulses (animate-pulse) with a staggered delay, centered on a light gray background.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Loading Bars Spinner</title>
    <script src="https://cdn.tailwindcss.com/3.4.16"></script>
</head>

<body class="flex justify-center items-center min-h-screen bg-gray-100">
    <div class="flex space-x-1">
        <div class="w-2 h-8 bg-blue-500
                    animate-pulse">
        </div>
        <div class="w-2 h-8 bg-green-500
                    animate-pulse delay-150">
        </div>
        <div class="w-2 h-8 bg-red-500
                    animate-pulse delay-300">
        </div>
        <div class="w-2 h-8 bg-yellow-500
                    animate-pulse delay-450">
        </div>
    </div>
</body>

</html>

Output:

Screen-Recording-2024-09-24-221845
Output

Article Tags :

Similar Reads