Create a Button Loading Animation in HTML CSS & JavaScript
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:
HTML
<!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 >w3wiki</ 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 > |
CSS
body { display : flex; justify- content : center ; align-items: center ; height : 100 vh; 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.3 s; 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 1 s linear infinite; margin-left : 10px ; } @keyframes spin { 0% { transform: rotate( 0 deg); } 100% { transform: rotate( 360 deg); } } .loading { background-color : #ccc ; pointer-events: none ; } |
Javascript
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: