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


P
parzival_op
Improve
Article Tags :

Explore

Lightbox