Loading Spinner Button Template

Provide clear feedback for background processes with a button that displays a loading spinner.

This component is essential for any action that isn't instantaneous, assuring users that their request is being processed and preventing duplicate submissions.

Get Source Code Preview

About the Loading Spinner Button

When a user submits a form, saves data, or performs any other asynchronous action, the interface must communicate that the system is working. A loading spinner button does exactly that. It visually changes the button to an "in-progress" state, usually disabling it to stop the user from clicking again. This simple piece of feedback vastly improves the user experience by managing expectations and reducing uncertainty.

Features

Clear Visual Feedback: The button text is replaced by a CSS-only spinner animation to indicate a loading process.
Prevents Duplicate Actions: The included JavaScript disables the button during the loading state, a best practice for form submissions.
Accessible States: The script can be expanded to use aria-live regions to announce the completion of the action to screen reader users.
Self-Contained: The HTML, CSS, and demonstrative JavaScript are all included in one block for easy implementation.

Code Breakdown

This component combines HTML, CSS, and JavaScript. The button contains the button text and a loader element, which is hidden by default. The CSS defines an animation using @keyframes to spin the loader element.

When the button is clicked, the JavaScript adds an is-loading class. This class triggers CSS rules that hide the text and display the loader. The script also sets the button's disabled property to true. A setTimeout is used here to simulate a network delay, after which the class is removed and the button is re-enabled.

Code

Here is the complete code for the loading spinner button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Spinner Button</title>
    <style>
        /*
         Component: Loading Spinner Button
         Description: A button that shows a spinner during a simulated loading state.
        */

:root {
            --loader-btn-bg: #007bff;
            --loader-btn-text-color: #ffffff;
            --loader-btn-bg-hover: #0069d9;
            --loader-btn-focus-outline: #007bff;
            --loader-spinner-color: #ffffff;
        }

.loading-container-1 {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            background-color: #f8f9fa;
        }

.loading-btn-1 {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 180px;
            padding: 0.9rem 1.8rem;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--loader-btn-text-color);
            background-color: var(--loader-btn-bg);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.2s ease-in-out;
        }

.loading-btn-1 .btn-text {
            transition: opacity 0.2s ease;
        }

/* --- Loading State --- */
        .loading-btn-1.is-loading .btn-text {
            opacity: 0;
        }
        
        .loading-btn-1.is-loading {
            cursor: wait;
        }

.loading-btn-1.is-loading,
        .loading-btn-1:hover.is-loading {
            background-color: var(--loader-btn-bg);
        }
        
        .loading-btn-1:focus-visible {
            outline: 3px solid var(--loader-btn-focus-outline);
            outline-offset: 2px;
        }

/* --- Spinner Animation --- */
        .loading-btn-1::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            top: 50%;
            left: 50%;
            margin-top: -10px;
            margin-left: -10px;
            border: 3px solid rgba(255, 255, 255, 0.4);
            border-top-color: var(--loader-spinner-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

.loading-btn-1.is-loading::after {
            opacity: 1;
        }

@keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>

<div class="loading-container-1">
        <button type="button" class="loading-btn-1" id="loadingBtn1">
            <span class="btn-text">Process Data</span>
        </button>
    </div>

loadingButton.addEventListener('click', function() {
                // Ignore click if already loading
                if (this.classList.contains('is-loading')) {
                    return;
                }
                
                this.classList.add('is-loading');
                this.disabled = true;

// Simulate a network request or processing time
                setTimeout(() => {
                    this.classList.remove('is-loading');
                    this.disabled = false;
                }, 3000);
            });
        });
    </script>

</body>
</html>

View Output