How to Create Animated Loading Button using CSS?
Last Updated :
18 Oct, 2024
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.
Using Font Awesome Spinner and CSS
In 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>
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 & Animation
In 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>
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:
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 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 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