How to create loading button in bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Create a Loading Button in Bootstrap Easily

To create a loading button in Bootstrap, use a button element with Bootstrap classes and toggle a spinner inside it using JavaScript. Add the spinner-border class inside the button to show a loading spinner and disable the button while loading.

📐

Syntax

A loading button in Bootstrap is a <button> element that contains a spinner element with the class spinner-border. You toggle the spinner's visibility and disable the button during loading.

button.btn: The main button with Bootstrap styling.
spinner-border: The spinner animation inside the button.
disabled attribute: Disables the button while loading.

html

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

Output

A blue Bootstrap button with a small spinning circle and the text 'Loading...' inside it, disabled so it cannot be clicked.

💻

Example

This example shows a Bootstrap button that changes to a loading state with a spinner when clicked, then returns to normal after 2 seconds.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Loading Button Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <div class="container mt-5">
    <button id="loadBtn" class="btn btn-primary" type="button">
      Submit
    </button>
  </div>

  <script>
    const button = document.getElementById('loadBtn');
    button.addEventListener('click', () => {
      button.disabled = true;
      button.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...';

      setTimeout(() => {
        button.disabled = false;
        button.textContent = 'Submit';
      }, 2000);
    });
  </script>
</body>
</html>

Output

A blue button labeled 'Submit'. When clicked, it shows a small spinner and 'Loading...' text, disables the button for 2 seconds, then returns to 'Submit' and re-enables the button.

⚠️

Common Pitfalls

Common mistakes when creating loading buttons in Bootstrap include:

Not disabling the button during loading, which allows multiple clicks.
Forgetting to add aria-hidden="true" to the spinner for accessibility.
Not restoring the original button text after loading finishes.
Using inline styles instead of Bootstrap classes for the spinner.

html

<!-- Wrong: Button not disabled and spinner missing aria-hidden -->
<button class="btn btn-primary" type="button" id="btnWrong">
  <span class="spinner-border spinner-border-sm"></span> Loading...
</button>

<!-- Right: Button disabled and spinner has aria-hidden -->
<button class="btn btn-primary" type="button" id="btnRight" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...
</button>

Output

Two buttons: The first is enabled with a spinner missing accessibility attribute; the second is disabled with a spinner that has correct accessibility attributes.

📊

Quick Reference

Summary tips for creating loading buttons in Bootstrap:

Feature	Description	Bootstrap Class/Attribute
Button style	Use Bootstrap button classes	btn, btn-primary (or other variants)
Spinner	Add spinner inside button	spinner-border, spinner-border-sm
Disable button	Prevent clicks during loading	disabled attribute
Accessibility	Hide spinner from screen readers	aria-hidden="true" on spinner
Toggle text	Change button text to show loading	Use JavaScript to update innerHTML/textContent

✅

Key Takeaways

Use a button with Bootstrap classes and add a spinner-border inside to show loading.

Disable the button during loading to prevent multiple clicks.

Use JavaScript to toggle spinner visibility and button text dynamically.

Add aria-hidden="true" to the spinner for better accessibility.

Restore the original button text and enable the button after loading completes.