How do I add a spinner inside a button while a form submits?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

How do I add a spinner inside a button while a form submits?

Asked on Jun 19, 2025

Answer

To add a spinner inside a button during form submission, you can use Bootstrap's spinner component and JavaScript to toggle its visibility. Here's a simple example:

<!-- BEGIN COPY / PASTE -->
        <form id="myForm">
            <button type="submit" class="btn btn-primary" id="submitButton">
                Submit
                <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true" id="spinner"></span>
            </button>
        </form>

        <script>
            document.getElementById('myForm').addEventListener('submit', function(event) {
                event.preventDefault();
                var button = document.getElementById('submitButton');
                var spinner = document.getElementById('spinner');
                spinner.classList.remove('d-none');
                button.disabled = true;

                // Simulate form submission delay
                setTimeout(function() {
                    spinner.classList.add('d-none');
                    button.disabled = false;
                }, 2000);
            });
        </script>
        <!-- END COPY / PASTE -->

Additional Comment:

The spinner is initially hidden using the `d-none` class.
When the form is submitted, the spinner becomes visible, and the button is disabled to prevent multiple submissions.
A `setTimeout` function simulates a delay (e.g., for an AJAX call) and then hides the spinner and re-enables the button.
Replace the `setTimeout` with actual form submission logic as needed.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How do I add a spinner inside a button while a form submits?

Asked on Jun 19, 2025

Answer

The Q&A Network