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. |
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 >
< link rel = "stylesheet" href =
integrity =
"sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin = "anonymous"
referrerpolicy = "no-referrer" />
</ 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:
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 =
integrity =
"sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin = "anonymous"
referrerpolicy = "no-referrer" />
< style >
@keyframes scaleAnimation {
0%,
100% {
transform: scale(80%);
}
50% {
transform: scale(50%);
}
}
</ style >
< 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 >
|
Output:
color
Share your thoughts in the comments
Please Login to comment...