Create a Button Loading Animation in HTML CSS & JavaScript
Last Updated :
19 Apr, 2025
Improve
A "Button Loading Animation" in HTML, CSS, and JavaScript is a user interface element that temporarily transforms a button into a loading state with a spinner or animation to indicate ongoing processing or data retrieval, providing feedback to users during asynchronous tasks.
Approach:
- HTML page with a user form, including username, password fields, and a "Submit" button that triggers a loading animation.
- CSS styles define the page's visual layout, including button styling, loader appearance, and form container formatting.
- JavaScript adds a "loading" class to the button and displays the loader when the "Submit" button is clicked.
- Simulated async operation using setTimeout for 2 seconds before restoring the button's normal state and resetting the form.
- Interactive form with a loading animation to improve user experience during form submission or other async actions.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Button Loading Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="form-container">
<h1>GeeksforGeeks</h1>
<form id="my-form">
<label for="username">Username:</label>
<input type="text" id="username"
name="username" required>
<br><br>
<label for="password">Password:</label>
<input type="password" id="password"
name="password" required>
<br><br>
<div class="btn-container">
<button id="loadButton" class="btn">
Submit
<div class="loader" id="loader">
</div>
</button>
</div>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.form-container {
background-color: gray;
width: 40%;
padding: 20px;
}
.btn-container {
display: flex;
align-items: center;
}
.btn {
padding: 10px 20px;
background-color: blue;
color: #fff;
border: none;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
display: flex;
align-items: center;
justify-content: space-between;
}
.btn:hover {
background-color: #0056b3;
}
.loader {
display: none;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid blue;
border-radius: 50%;
width: 25px;
height: 25px;
animation: spin 1s linear infinite;
margin-left: 10px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading {
background-color: #ccc;
pointer-events: none;
}
const loadButton =
document.getElementById('loadButton');
const loader =
document.getElementById('loader');
const demoForm =
document.getElementById('my-form');
loadButton.addEventListener('click', () => {
// Disable the button
// and prevent further clicks
loadButton.disabled = true;
loader.style.display = 'inline-block';
setTimeout(() => {
// Restore the button state
//after the operation is done
loadButton.disabled = false;
loader.style.display = 'none';
demoForm.reset();
}, 2000);
});
Output:
