How to use Bootstrap spinners for loading states

Bootstrap spinners are used to indicate loading states in web applications. 1. There are two types: the border spinner, which rotates, and the grow spinner, which scales with a pulsing effect, both requiring role="status" and a visually hidden "Loading..." message for accessibility. 2. Customize appearance using text color classes like text-primary or text-success, applicable to both spinner types. 3. Use spinners in buttons with spinner-border-sm for a compact look, in full-page loaders with Flexbox for centering, or alongside text for background tasks. 4. Hide spinners with JavaScript after content loads, preferably using d-none class and adding delays to avoid flicker for fast operations. 5. For better UX, avoid spinners for sub-300ms tasks, consider a 500ms delay before showing, and pair with progress indicators for long processes. Bootstrap spinners are lightweight, easy to implement, and fully responsive when used correctly.

Bootstrap spinners are a simple and effective way to show loading states in your web application. They’re lightweight, easy to implement, and automatically animate to indicate that content is loading. Here’s how to use them effectively.

Basic Spinner Types

Bootstrap provides two types of spinners: border spinner and grow spinner.

Border Spinner (Default)

This is the most commonly used spinner. It looks like a rotating circle with a transparent center.

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Grow Spinner

This spinner scales up and down instead of rotating. It gives a "pulsing" effect.

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Always include role="status" and a visually hidden "Loading..." message for accessibility.

Customizing Spinner Appearance

You can change the spinner’s color using Bootstrap’s text color utilities.

<div class="spinner-border text-primary" role="status"></div>
<div class="spinner-border text-success" role="status"></div>
<div class="spinner-border text-danger" role="status"></div>

Available color variants: primary, secondary, success, danger, warning, info, light, dark.

Note: For spinner-grow, use the same text-* classes to change color.

Using Spinners in Different Contexts

1. Inside Buttons (Loading State)

When a button triggers a loading action (like form submission), you can replace the text with a spinner.

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

Use spinner-border-sm for smaller spinners, ideal for buttons.

2. Full Page or Section Loader

Wrap a spinner in a container to indicate that a section or entire page is loading.

<div class="d-flex justify-content-center align-items-center" style="height: 200px;">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

This centers the spinner both vertically and horizontally using Flexbox.

3. With Text or Labels

You can place a spinner next to text to indicate background activity.

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

Hiding Spinners After Content Loads

In practice, you’ll usually show the spinner initially and hide it with JavaScript once content is ready.

<div id="content">
  <div id="loader" class="text-center my-3">
    <div class="spinner-border" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
  </div>
  <div id="data" style="display: none;">
    <!-- Your loaded content -->
    <p>Data has loaded successfully!</p>
  </div>
</div>

<script>
  // Simulate loading delay
  setTimeout(() => {
    document.getElementById('loader').style.display = 'none';
    document.getElementById('data').style.display = 'block';
  }, 2000);
</script>

You can also use classes like d-none instead of inline styles for better consistency.

Responsive and Performance Tips

• Use visually-hidden to keep screen readers informed.
• Avoid using spinners for very short operations (
• For better UX, consider adding a delay before showing the spinner (e.g., only show if loading takes longer than 500ms).
• Pair spinners with progress bars or estimated time for long operations.

Basically, Bootstrap spinners are plug-and-play components that work well out of the box. Just pick the style, color, and size you need, and integrate them with minimal HTML and a bit of JavaScript for dynamic control.

The above is the detailed content of How to use Bootstrap spinners for loading states. For more information, please follow other related articles on the PHP Chinese website!