How to use custom animation In CSS
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"> w3wiki </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
How to Create Animated Loading Button using Tailwind CSS ?
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.