Create a Button Loading Animation in HTML CSS & JavaScript

Last Updated : 31 Oct, 2023

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.

loder-animation

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>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>

CSS

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; 
}

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); 
});