Bootstrap - Spinners

Ethan D. -

Basic Spinner

Bootstrap provides a way to create a basic Spinner using the .spinner-border class. To create a basic Spinner, add this class to a <div> element, along with the role="status" attribute for accessibility.

Example: Basic Spinner

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

This will create a default-sized Spinner with a border animation.

You can change the size of the Spinner by adding classes. Bootstrap provides three size classes for Spinners:

Class Description
.spinner-border-sm Small Spinner
.spinner-border Default Spinner
.spinner-border-lg Large Spinner

Example: Spinner Sizes

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

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

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

By default, Spinners use the primary color defined in your Bootstrap theme. However, you can change the color of a Spinner by adding one of the contextual color classes:

Class Description
.text-primary Primary color
.text-secondary Secondary color
.text-success Success color
.text-danger Danger color
.text-warning Warning color
.text-info Info color
.text-light Light color
.text-dark Dark color

Example: Spinner Colors

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

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

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

These classes will change the color of the Spinner to match the corresponding contextual color.

Growing Spinner

In addition to the basic Spinner, Bootstrap also provides a growing Spinner variant. The growing Spinner uses a similar HTML structure but with the .spinner-grow class instead of .spinner-border.

Example: Growing Spinner HTML Structure

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

The growing Spinner has a different animation compared to the basic Spinner. Instead of a spinning border, the growing Spinner starts small and grows larger, giving the impression of something "filling up" or loading.

Just like the basic Spinner, you can change the size of the growing Spinner using the size classes:

Class Description
.spinner-grow-sm Small growing Spinner
.spinner-grow Default growing Spinner
.spinner-grow-lg Large growing Spinner

Growing Spinner Size Example

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

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

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

You can also apply color classes to the growing Spinner, just like with the basic Spinner:

Growing Spinner Color Example

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

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

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

While both the basic Spinner (.spinner-border) and the growing Spinner (.spinner-grow) serve the same purpose of showing a loading state, they have some differences:

  1. Animation: The basic Spinner has a spinning border animation, while the growing Spinner has a growing animation that starts small and expands.
  2. Appearance: The basic Spinner has a solid border and transparent background, whereas the growing Spinner has a solid fill color that grows in size.
  3. Use case: The choice between the basic and growing Spinner depends on your design preference and the context of your application. The basic Spinner is commonly used to show ongoing processes or loading of content, while the growing Spinner is often used to show progress or completion of a task.

Both Spinner types are customizable and can be sized and colored according to your needs. Choose the one that best fits your design and provides a clear indication of the loading state to your users.

Spinner Buttons

Bootstrap lets you use Spinners inside Buttons to show a loading state for actions that take some time to complete. This gives users visual feedback that the Button action is being processed.

To create a Spinner Button, add the Spinner HTML code inside a <button> element. You can use either the basic Spinner (.spinner-border) or the growing Spinner (.spinner-grow) inside the Button.

Example: Basic Spinner Button

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

The Spinner is placed inside a Button with the .btn-primary class. The disabled attribute is added to the Button to show that it is not clickable while the loading state is active. The aria-hidden="true" attribute is used to hide the Spinner from assistive technologies since the Button text already conveys the loading state.

You can control the size of the Spinner inside a Button by using the Spinner size classes (.spinner-border-sm, .spinner-grow-sm) to match the size of the Button for a harmonious appearance.

Example: Spinner Button with Different Sizes

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

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

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

The Spinner size is adjusted using the .spinner-border-sm class to match the size of the small (.btn-sm), default, and large (.btn-lg) Buttons.

You can also change the color of the Spinner inside a Button by using the Button color classes (.btn-primary, .btn-secondary, .btn-success, etc.).

Example: Spinner Button with Different Colors

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

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

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

These examples show Spinner Buttons with different colors, matching the color of the Buttons.

Using Spinner Buttons provides a clear sign to users that an action is in progress, preventing confusion and improving the user experience. Be sure to use appropriate Button labels along with the Spinners to communicate the specific action being performed.

Spinner Alignment

Bootstrap has utility classes that let you align Spinners in a container. You can center a Spinner or put it on the right or left side of a container.

To center a Spinner in a container, use the .text-center class on the Spinner's parent element. This class applies a text-align: center style to the container, centering its inline content, including the Spinner.

Example: Centering a Spinner

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

To put a Spinner on the right or left side of a container, use Bootstrap's flexbox utility classes.

To put a Spinner on the right side of a container, use the .d-flex class on the parent element to create a flex container, and then use the .ms-auto class on the Spinner element.

Example: Aligning a Spinner to the right

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

To put a Spinner on the left side of a container, use the .me-auto class on the Spinner element.

Example: Aligning a Spinner to the left

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

You can also combine these alignment classes with other utility classes to control the position and spacing of Spinners in a container.

Example: Centering a Spinner with vertical margin

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

By using these alignment classes, you can control the placement of Spinners in a container, whether you want them centered or on the right or left side. This gives you flexibility in designing your loading states and adapting them to different layouts and design needs.

Spinner Accessibility

Accessibility is an important aspect of web design, and it applies to Spinners as well. Spinners are often used to show that content is loading or a process is ongoing, so it's important for all users, including those using assistive technologies, to understand the purpose of the Spinner.

To make Spinners accessible, use the appropriate ARIA (Accessible Rich Internet Applications) attributes. ARIA attributes help assistive technologies, such as screen readers, understand the role and state of elements on a web page.

Example: Spinner with role 'status'

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

Provide a text alternative that explains the purpose of the Spinner. This text should be placed in a <span> element with the .visually-hidden class, which hides the text visually but keeps it accessible to assistive technologies.

Example: Spinner with descriptive text

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

Example: Spinner states

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

<!-- Success state -->
<div class="spinner-border text-success">
  <span class="visually-hidden">Content loaded successfully.</span>
</div>

<!-- Error state -->
<div class="spinner-border text-danger">
  <span class="visually-hidden">Error loading content.</span>
</div>

Remember, accessibility is an essential part of web development, and by making your Spinners accessible, you contribute to creating a more inclusive web for everyone.

Spinner Customization

Bootstrap Spinners have default styles and animation speeds, but you can change them to fit your specific design needs. Let's look at how you can change Spinner animation speed, create custom Spinner styles with CSS, and use custom SVG images as Spinners.

Changing Spinner Animation Speed

You can change the animation speed of a Spinner by adding a custom CSS rule. Bootstrap Spinners use the @keyframes rule to define the animation. You can override this rule to change the animation speed.

Example: Changing Spinner Animation Speed

<style>
  @keyframes spinner-border {
    to {
      transform: rotate(360deg);
      animation-duration: 2s;
    }
  }
</style>

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

Adjusting the animation duration value will change the Spinner's speed.

Creating Custom Spinner Styles with CSS

You can create custom Spinner styles by writing your own CSS. This gives you control over the look of the Spinner, including its size, color, and animation.

Example: Creating Custom Spinner Styles with CSS

<style>
  .custom-spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    animation: custom-spinner 1s linear infinite;
  }

  @keyframes custom-spinner {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>

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

The Spinner is given a fixed width and height, a circular shape using border-radius: 50%, and a custom border color. The animation is defined using the @keyframes rule, specifying the rotation from 0deg to 360deg.

Using Custom SVG Images as Spinners

For advanced customization, you can use custom SVG images as Spinners. SVG (Scalable Vector Graphics) lets you create resolution-independent graphics that can be animated using CSS or JavaScript.

Example: Using Custom SVG Images as Spinners

<style>
  .custom-svg-spinner {
    width: 40px;
    height: 40px;
    animation: custom-svg-spinner-rotate 2s linear infinite;
  }

  @keyframes custom-svg-spinner-rotate {
    100% {
      transform: rotate(360deg);
    }
  }
</style>

<svg class="custom-svg-spinner" viewBox="0 0 50 50">
  <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
</svg>

The custom-svg-spinner class is added to the <svg> element, and the animation is defined using the @keyframes rule to rotate the SVG.

By changing Spinner animation speed, creating custom Spinner styles with CSS, and using custom SVG images, you can create Spinners that match your design and provide a unique user experience.