How to Create Animated Loading Button using Tailwind CSS ?

Last Updated : 08 Feb, 2024

To create an animated loading button using Tailwind CSS, first, define the button structure with the loading animation. We can utilize Tailwind CSS classes to style the button and animation, such as ‘bg-green-500’ for background color and animate-spin for rotation.

Syntax:

<div class="animate-[animation]">
    ... content
</div>

Classes	Description
animate-none	Removes all current animations on the object.
animate-spin	Rotates the element infinitely.
animate-bounce	Bounces the animated object.
animate-pulse	Creates a pulse animation.
animate-ping	Creates a ping animation, simulating a radar pulse effect.

Table of Content

Using utility classes
Using custom animation

Using utility classes

To create a loading button, you can use the Tailwind CSS utility classes as described above. In this example, we use the “animate-spin” utility class to create an infinite spinner to depict the loading animation.

Example: Implemenatation to create animated loading button using utility classes.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        To create Animated Loading Button
    </title>
 
    <!-- font awesome cdn -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
          integrity=
"sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
          crossorigin="anonymous"
          referrerpolicy="no-referrer" />
    <script src="https://cdn.tailwindcss.com"></script>
</head>
 
<body class="flex flex-col justify-center items-center py-10">
    <h1 class="text-green-500 text-2xl font-bold">GeeksforGeeks</h1>
    <h4 class="text-lg font-bold">
        Creating Animated Loading 
          Button using Tailwind CSS
    </h4>
    <button disabled
            class="flex items-center justify-center gap-2 
                   px-5 py-2 mt-2 rounded bg-green-500 text-white 
                   disabled:bg-green-500/80 disabled:cursor-not-allowed">
            Loading
          <i class="animate-spin fa-solid fa-circle-notch"></i>
    </button>
</body>
 
</html>

Output:

jui

Using custom animation

You can also create your custom animations by modifying the tailwind config. Let’s create a custom animation inside the tailwind config to create our own animation for loading.

Example: Implemenatation to create animated loading button using custom animation.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        To create Animated Loading Button using Tailwind CSS
    </title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
          integrity=
"sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
          crossorigin="anonymous"
          referrerpolicy="no-referrer" />
    <script src="https://cdn.tailwindcss.com"></script>
 
    <style>
        @keyframes scaleAnimation {
 
            0%,
            100% {
                transform: scale(80%);
            }
 
            50% {
                transform: scale(50%);
            }
        }
    </style>
    <!-- tailwindcss cdn -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    animation: {
                        scale: "scaleAnimation 1s linear infinite",
                    },
                },
            },
        };
    </script>
</head>
 
<body class="flex flex-col justify-center items-center py-10">
    <h1 class="text-green-500 text-2xl font-bold">
          GeeksforGeeks
      </h1>
    <h4 class="text-lg font-bold">
        How to create Animated Loading 
          Button using Tailwind CSS ?
    </h4>
    <button disabled
        class="font-bold flex items-center 
               justify-center gap-1 px-5 py-2 
               mt-2 rounded bg-green-500 text-white 
               disabled:bg-green-500/80 disabled:cursor-not-allowed">
        Loading
        <div class="flex items-end mt-1">
            <i class="animate-scale fa-solid fa-circle fa-2xs"></i>
            <i class="animate-scale fa-solid fa-circle fa-2xs"></i>
            <i class="animate-scale fa-solid fa-circle fa-2xs"></i>
        </div>
    </button>
</body>
 
</html>