How to Create a Loading Button in HTML and CSS

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

Introduction

A loading button is a button that displays a loading spinner to indicate that an action is in progress, such as submitting a form or processing a request. This can greatly improve the user experience by providing feedback while the action is being completed. You can create a loading button using HTML and CSS by animating a spinner inside the button.

In this tutorial, you will learn how to create a loading button using CSS animations and basic HTML structure.

Problem Statement

Create a CSS code that:

Displays a button.
Shows a loading spinner inside the button when the button is clicked or in a loading state.
Optionally adds a disabled state to the button while it's loading.

Example:

Input: A button element with the text "Submit" that changes to a loading spinner when clicked.
Output: A button with a loading spinner and a smooth animation effect.

Solution Steps

Use the <button> Element: Create a button in HTML.
Add the Loading Spinner with CSS: Use keyframes and animation to create a spinner.
Toggle the Loading State: Style the button to show the spinner when it's in the loading state.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Button</title>
    <style>
        /* Step 1: Style the button */
        .loading-button {
            font-size: 1.2rem;
            color: white;
            background-color: #3498db;
            padding: 12px 30px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            position: relative;
            transition: background-color 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        /* Step 2: Style the spinner */
        .loading-button .spinner {
            width: 20px;
            height: 20px;
            border: 3px solid white;
            border-top-color: transparent;
            border-radius: 50%;
            position: absolute;
            animation: spin 1s linear infinite;
            display: none; /* Hidden by default */
        }

        /* Step 3: Show spinner in loading state */
        .loading-button.loading .spinner {
            display: block; /* Show spinner when loading */
        }

        /* Hide text when loading */
        .loading-button.loading span {
            visibility: hidden; /* Hide text while loading */
        }

        /* Spinner animation */
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>

    <div style="text-align: center; margin-top: 100px;">
        <button class="loading-button" id="submitBtn">
            <div class="spinner"></div>
            <span>Submit</span>
        </button>
    </div>

    <script>
        // JavaScript to toggle loading state
        const submitBtn = document.getElementById('submitBtn');

        submitBtn.addEventListener('click', function() {
            // Toggle loading state
            submitBtn.classList.add('loading');

            // Simulate a delay (e.g., 3 seconds) for loading
            setTimeout(function() {
                submitBtn.classList.remove('loading');
            }, 3000);
        });
    </script>

</body>
</html>

Output

Click on the below Submit button to see the loading demo. You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

Step 1: Style the Button

The .loading-button class styles the button with basic properties like background color, padding, border-radius, and position.

.loading-button {
    font-size: 1.2rem;
    color: white;
    background-color: #3498db;
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

position: relative: Allows the spinner to be positioned inside the button.
display: inline-flex: Ensures that the text and spinner are aligned inside the button.

Step 2: Style the Spinner

The .spinner class styles the loading spinner inside the button. It uses border-radius to create a circular spinner and animation to make it rotate.

.spinner {
    width: 20px;
    height: 20px;
    border: 3px solid white;
    border-top-color: transparent;
    border-radius: 50%;
    position: absolute;
    animation: spin 1s linear infinite;
    display: none; /* Hidden by default */
}

border: 3px solid white: Creates a circular spinner with a solid border.
border-top-color: transparent: Makes the top part of the spinner transparent to create the spinning effect.
animation: spin 1s linear infinite: Rotates the spinner continuously.

Step 3: Add Loading State

When the button is clicked, the loading class is added, which reveals the spinner and hides the button text.

.loading-button.loading .spinner {
    display: block;
}

.loading-button.loading span {
    visibility: hidden; /* Hide text while loading */
}

.loading-button.loading .spinner { display: block; }: When the button is in the loading state, the spinner becomes visible.
.loading-button.loading span { visibility: hidden; }: The button text is hidden while the loading spinner is shown.

Step 4: Add Spinner Animation

The @keyframes rule is used to create the spinning effect for the loader.

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

transform: rotate(360deg): Rotates the spinner 360 degrees to create the spinning effect.

Step 5: Toggle Loading State with JavaScript

In the JavaScript section, the button's loading state is toggled when it is clicked. The setTimeout function simulates a loading process that lasts 3 seconds before removing the loading state.

submitBtn.addEventListener('click', function() {
    submitBtn.classList.add('loading');
    setTimeout(function() {
        submitBtn.classList.remove('loading');
    }, 3000);
});

Customization

Change Spinner Size

You can easily adjust the size of the spinner by modifying the width and height properties in the .spinner class:

.spinner {
    width: 30px;
    height: 30px;
    border: 4px solid white;
    border-top-color: transparent;
}

Change Spinner Color

You can change the spinner's color by adjusting the border-color property:

.spinner {
    border: 3px solid #ffffff;
    border-top-color: #3498db; /* Blue spinner */
}

Conclusion

Creating a loading button in HTML and CSS is simple with the help of CSS animations and the @keyframes rule. You can use a loading spinner inside the button to indicate that an action is in progress. With the help of JavaScript, you can easily toggle the loading state and simulate real-time functionality.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide

Java Guides

Search This Blog