How to add a loading spinner to a button in Bootstrap

要添加加载 spinner 到 Bootstrap 按钮中，需使用 Bootstrap 内置的 spinner 类并结合 JavaScript 动态控制；1. 在按钮中插入 <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 并添加“Loading...”文本；2. 通过 JavaScript 在点击时禁用按钮，并将原始文本保存，替换为带 spinner 的加载状态；3. 在异步操作完成后恢复按钮的原始状态；4. 可添加 me-2 类优化 spinner 与文本的间距；5. 确保使用 role="status" 和 aria-hidden="true" 以提升可访问性。该方法适用于 Bootstrap 5 和 4，无需额外库，即可有效防止重复提交并提升用户体验。

Adding a loading spinner to a button in Bootstrap is a common way to improve user experience during form submissions or API calls. Here's how to do it using Bootstrap’s built-in spinner component.

Use Bootstrap’s Spinner Inside the Button

Bootstrap includes a lightweight spinner utility that you can insert directly into a button. When an action starts (like submitting a form), you replace the button text with a spinner.

<button class="btn btn-primary" id="submit-btn">
  Submit
</button>

To show the spinner, update the button content with JavaScript:

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

Toggle Spinner with JavaScript

You typically want to show the spinner only when needed (e.g., after a click). Here’s how to dynamically add and remove the spinner:

const button = document.getElementById('submit-btn');
const originalText = button.innerHTML;

button.addEventListener('click', function () {
  // Disable button and show spinner
  button.disabled = true;
  button.innerHTML = `
    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    Loading...
  `;

  // Simulate form submission or API call
  setTimeout(() => {
    // Restore button after task completes
    button.disabled = false;
    button.innerHTML = originalText;
  }, 2000);
});

Key Points to Remember

• Use spinner-border – This is Bootstrap’s default spinner class.
• Add spinner-border-sm – Makes the spinner smaller and better suited for buttons.
• Include accessibility attributes – role="status" and aria-hidden="true" help screen readers ignore the spinner.
• Disable the button – Prevents multiple submissions while loading.
• Preserve original text – Store it so you can restore the button state later.

Styling Tips

If the spinner appears misaligned, you can add a small margin:

<span class="spinner-border spinner-border-sm me-2" role="status"></span>
Loading...

The me-2 class adds right margin (margin-end) for better spacing.

That’s it. No extra libraries needed—just Bootstrap’s built-in classes and a bit of JavaScript. Works reliably across Bootstrap 5 and 4 (with slight variations in spinner classes if using Bootstrap 4).

The above is the detailed content of How to add a loading spinner to a button in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!