Open In App

Create a Button Loading Animation in HTML CSS & JavaScript

Last Updated : 19 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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

Output:

loder-animation


Next Article
How to make a Toast Notification in HTML CSS and JavaScript ?

P
parzival_op
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox