How to Create Animated Loading Button using CSS? Last Updated : 18 Oct, 2024 Comments Improve Suggest changes Like Article Like Report 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 Awesome Spinner and CSSUsing CSS Properties & AnimationUsing Font Awesome Spinner and CSSIn this approach, we will do the creation of loading buttons using Font Awesome icons for various spinner animations. The fa-spin class inside <i> tag is essential for rotation.Example: The example illustrates the code for loading buttons using Font Awesome Spinner. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width,initial-scale=1.0"> <title>Animated Loading Button</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Code World</h1> <h3> Loading buttons using CSS and Font Awsome Icons. </h3> <button>Spinner <i class="fa fa-spinner fa-spin"></i> </button> <button>Rotate-right <i class="fa fa-spin fa-solid fa-rotate-right"> </i> </button> <button>Circle-notch <i class="fa fa-solid fa-spin fa-circle-notch"> </i> </button> </body> </html> CSS h1 { color: green; } h3 { font-size: 20px; } button { padding: 10px; font-size: 20px; font-weight: 700; border-radius: 10px; background-color: green; color: antiquewhite; border: 2px solid rgb(223, 190, 190); transition: all 0.3s ease; } button:hover { background-color: rgb(15, 138, 66); color: rgb(244, 244, 223); box-shadow: rgba(32, 31, 31, 0.35) 0px 7px 10px; font-weight: 900; } i { margin-left: 5px; } Output:Using CSS Properties & AnimationIn this approach, we will use custom CSS to make loading animation by styling a green heading, a smaller subheading, and a button with various properties. Additionally, we will animate circular elements positioned using absolute positioning and defined keyframes for rotation and spinning effects.Example: The example illustrates the implementation of the code for loading buttons using CSS. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Loading Buttons</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1></h1> <h3>Spinner with CSS</h3> <button>Click Me <div class="box"> <div class="innerbox"></div> </div> </button> </body> </html> CSS h1 { color: green; } h3 { font-size: 20px; } .innerbox { position: absolute; top: 20%; left: 70%; width: 20px; height: 20px; border-radius: 50%; border: 4px solid rgb(231, 214, 214); border-top-color: #284018; animation: loader-spin 1.8s linear infinite; } .innerbox::before { content: ""; position: absolute; top: 12px; left: 12px; width: 56px; height: 56px; border-radius: 50%; background-size: 100%; animation: loader-animation 3s infinite ease-in-out; } @keyframes loader-animation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes loader-spin { to { transform: rotate(360deg); } } button { position: relative; font-size: 20px; font-weight: 700; padding: 10px; background-color: rgb(39, 138, 39); border-radius: 20px; color: antiquewhite; border: 2px solid rgb(223, 190, 190); padding-right: 50px; } button:hover { background-color: rgb(15, 138, 66); color: rgb(244, 244, 223); box-shadow: rgba(32, 31, 31, 0.35) 0px 7px 10px; font-weight: 900; } Output: Comment More infoAdvertise with us Next Article How to Create Animated Loading Button using CSS? S shivanigupta18rk Follow Improve Article Tags : Web Technologies CSS Web Templates CSS-Questions Similar Reads How to Create Animated Loading Button using Tailwind CSS? 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 Content 2 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 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 Shaky button using HTML and CSS? To create a shaky button using HTML and CSS involves adding an animation effect to a button element, making it appear to shake when interacted with. This effect can be used to draw attention to buttons, such as a snooze button or a button requiring immediate action. ApproachHTML page structure is de 2 min read How to create a animated pill shaped button using HTML and CSS ? Most mobile applications and websites have some eye-catching animation that tries to grab the attention of the user, these animations trigger some event fire or on an infinite loop, website events are triggered on mouse clicks or mouse hovers while on mobile touch events or infinite loop is activate 4 min read How to Create Animated Background using CSS3 ? Pre-requisite:Basic html Learn HTMLcss Learn cssYou will need to have a basic knowledge of Keyframes with css Learn Keyframes In this article, we are creating the background animation using CSS. The login form is used as a demo and the main intention to design background animation. HTML code: In thi 3 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 How to Create a Dot loading Animation using HTML and CSS? The Dot Loading animation can be used to enhance the user interface of a website, it can be added while the website loads. This animation can be easily created using HTML and CSS. HTML Code: In this section we will create the basic structure of the dot loader using a div tag which will have some spa 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 Like