Creating Loading Indicators (Spinners) with Bootstrap: A Simple Guide

Learn how to easily implement loading spinners (loading indicators) in your Bootstrap projects to improve user experience. This tutorial demonstrates creating and customizing various spinner types, including border spinners and grow spinners, enhancing visual feedback during asynchronous operations.

Creating Loading Indicators (Spinners) with Bootstrap

Understanding Bootstrap Spinners

Bootstrap spinners, also known as loading indicators, provide visual feedback to users while a process is ongoing (e.g., loading data, processing a request). They improve user experience by providing a clear indication that something is happening, reducing frustration from perceived inactivity.

Types of Bootstrap Spinners

Bootstrap offers several types of spinners:

1. Border Spinner (`.spinner-border`)

A simple, lightweight spinner created using a border effect. You would include the Bootstrap CSS and then add the `.spinner-border` class to the element you want to use as a spinner. It typically uses a rotating border to create the spinning animation.

Example HTML

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

2. Colored Spinners

You can customize the spinner's color using Bootstrap's color utility classes (e.g., `.text-primary`, `.text-danger`). These classes are applied to the spinner element.

3. Growing Spinner (`.spinner-grow`)

This spinner uses a growing/shrinking effect to indicate loading. It's similar to the border spinner but employs a different animation technique.

Example HTML

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

4. Colored Growing Spinners

Similar to border spinners, you can customize the color of growing spinners using Bootstrap color utility classes.

Customizing Spinner Appearance and Alignment

Bootstrap spinners can be customized using these techniques:

1. Margin Utilities

Use Bootstrap's margin utility classes (e.g., `m-2`, `mx-auto`) to control the spinner's spacing.

2. Text Alignment

Use text alignment classes (e.g., `.text-center`) to align the spinner and any accompanying text.

3. Flexbox

Use Flexbox to precisely position and align spinners within a container.

4. Float

Use float utilities (e.g., `.float-start`, `.float-end`) to position the spinner to the left or right.

Spinner Sizes

Bootstrap offers small and large spinner sizes:

  • .spinner-border-sm / .spinner-grow-sm: Small spinner.
  • .spinner-border-lg / .spinner-grow-lg: Large spinner.

Button Spinners

To indicate that a button is processing an action, place a spinner *inside* the button.