How to Create Animated Loading Button using Tailwind CSS? Last Updated : 18 Oct, 2024 Comments Improve Suggest changes Like Article Like Report An Animated Loading Button is a button that displays a loading spinner or animation to indicate an ongoing process, such as form submission. Using Tailwind CSS, you can create this by combining utility classes for styling and animations to visually enhance the button during loading. Table of ContentUsing utility classesUsing custom animationUsing utility classesTo 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: Implementation to create an animated loading button using utility classes. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <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">Code World</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 fas fa-circle-notch"></i> </button> </body> </html> Output:Using custom animationYou 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> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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(1); } 50% { transform: scale(1.5); } } </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">Code World</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-xs"></i> <i class="animate-scale fa-solid fa-circle fa-xs"></i> <i class="animate-scale fa-solid fa-circle fa-xs"></i> </div> </button> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Create Animated Loading Button using Tailwind CSS? mycodenotein Follow Improve Article Tags : Web Technologies CSS Tailwind CSS Tailwind CSS-Questions Similar Reads How to Create Animated Loading Button using CSS? An animated loading button provides a visual cue during processing, often featuring a spinner or pulsing effect. To create one using CSS, style a button element, include a spinner inside, and use CSS animations (like keyframes) to animate the spinner on button activation.Table of ContentUsing Font A 3 min read How to Create Animation Loading Bar using CSS ? Loading Bar with animation can be created using HTML and CSS. We will create a Loader that is the part of an operating system that is responsible for loading programs and libraries. The progress bar is a graphical control element used to visualize the progression of an extended computer operation, s 3 min read Create Animated Scroll-to-Top Button in Tailwind CSS An animated scroll-to-top button is a user interface element that appears on a webpage when the user scrolls down. It allows the user to quickly return to the top of the page with a single click or tap. This feature is often implemented using CSS animations or transitions, and it can enhance the use 2 min read Create Buttons UI using React and Tailwind CSS Tailwind CSS is a utility-first CSS framework that allows developers to quickly build responsive and reusable components. We'll explore how to create buttons with different styles such as primary, secondary, and disabled states, and buttons of various sizes.PrerequisitesReact JavaScriptNodeJSTailwin 2 min read How to Create Neon Light Button using HTML and CSS? The neon light button animation effect can be easily created by using HTML and CSS. By using HTML, we will design the basic structure of the button and then by using the CSS, we can create the neon light animation effect. HTML code: In this section, we will design a simple button structure using anc 2 min read How to create advanced Loading Screen using CSS ? In this article, we are going to build an advanced version of a wave-like structure for loading screens using HTML and CSS. The loading screen is useful when a certain page took a few seconds to load the content of the webpage. If a certain webpage doesn’t contain the loading screen then at the time 2 min read How to Create Animated Loader Ring using HTML and CSS? An Animated Loader Ring using HTML and CSS is a circular loading animation that visually indicates progress or loading status. It is created with a simple HTML structure and animated using CSS properties like border, transform, and @keyframes for rotation effects.ApproachHTML Structure: The code use 2 min read How To Create Download Buttons using CSS ? In CSS, we can create and style the download buttons to enhance the overall web interface of the application. Various styling properties like padding, hover, and animation can be added to the buttons. Below are the different approaches for creating a download button in CSS: Table of Content Download 3 min read How to create Shooting Star Animation Effect using CSS ? The Shooting Star effect is one of the coolest background effects that is used for dark-themed websites. Shooting Stars Animation is an extraordinary illustration of a loading screen that grabs your eye for a considerable length of time for the remainder of the content to load on the website. This e 4 min read How to Create Circle Loading Animation Effect using CSS ? In this article, we will see how to create a circle-loading animation using HTML and CSS, along with understanding its basic implementation through the example. Generally, Loading Animation is utilized to wait for the content to be fully loaded on the webpage. If some pages don't contain the loader, 6 min read Like