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.
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.
<!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.
<!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:
