• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Spinners

← Previous Next →

Spinners are small animated icons that indicate a process is ongoing, such as loading content, submitting forms, or fetching data. They are useful for improving the user experience, as they reassure users that an operation is in progress rather than leaving them guessing. Bootstrap 4 provides built-in spinner components that are easy to implement, flexible, and visually consistent. This tutorial covers everything you need to know about BS4 spinners.

What Are Spinners?

A spinner is an animated visual element that loops continuously to represent an ongoing process. Unlike progress bars, which display the percentage completed, spinners do not show exact progress but give users immediate feedback that something is happening in the background. Bootstrap 4 offers two types of spinners: border spinners and growing spinners.

Border Spinners

Border spinners are circular indicators with a rotating border. They are created using the .spinner-border class. You can change the color using contextual classes like .text-primary or .text-success.

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

  • role="status" makes the spinner accessible.

  • .sr-only provides screen readers with a descriptive text without displaying it visually.

Border spinners are often used in buttons, modals, or standalone loading indicators.

Growing Spinners

Growing spinners expand and contract in a pulsating manner. They are created using the .spinner-grow class. Like border spinners, contextual classes can change their color.

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

Growing spinners offer a softer visual effect and are useful for lightweight loading indicators.

Spinner Sizes

Bootstrap 4 allows you to adjust spinner sizes to fit different contexts. By default, spinners are medium-sized. To make them smaller, add .spinner-border-sm or .spinner-grow-sm for small spinners.

<div class="spinner-border spinner-border-sm text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>

Smaller spinners are often used inside buttons or alongside text.

Spinners Inside Buttons

Spinners are commonly used inside buttons to indicate actions like form submission or data processing. They can be combined with button text for clarity.

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

Here, the button is disabled to prevent repeated clicks, and the spinner communicates that an action is ongoing.

Spinner Colors

Bootstrap 4 supports multiple contextual colors for spinners, including .text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info, .text-light, and .text-dark.

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

Using colors can help indicate the type of process or match branding colors.

Accessibility Considerations

Accessibility is important when using spinners. Always include:

  • role="status" on the spinner element

  • A visually hidden text description using .sr-only

  • Avoid relying solely on color to communicate status

These practices ensure that assistive technologies can interpret the spinner correctly.

Spinner Placement

Spinners can be used in multiple contexts:

  • Standalone Loading Indicators: Centered on the page while fetching data.

  • Inside Buttons: Shows that a button action is in progress.

  • Inline with Text: Indicates a small process next to a sentence or label.

Loading data <div class="spinner-border spinner-border-sm text-primary" role="status"></div>

This placement makes the spinner unobtrusive yet informative.

Combining Multiple Spinners

You can display multiple spinners together for aesthetic or functional purposes. For example, a loading screen with three growing spinners in a row.

<div class="d-flex justify-content-around">
  <div class="spinner-grow text-primary" role="status"></div>
  <div class="spinner-grow text-success" role="status"></div>
  <div class="spinner-grow text-danger" role="status"></div>
</div>

This creates a visually engaging loading section for dashboards or modals.

Customization

Spinners can be customized with CSS:

  • Adjust width and height for different sizes

  • Add margins or padding for spacing

  • Change animation speed using animation-duration in CSS

<style>
  .custom-spinner {
    width: 3rem;
    height: 3rem;
    animation-duration: 1.5s;
  }
</style>
<div class="spinner-border text-info custom-spinner" role="status"></div>

Customization helps spinners fit seamlessly into your website design.

Best Practices

  1. Use spinners only when an operation takes noticeable time.

  2. Combine spinners with text when possible for clarity.

  3. Avoid overusing multiple spinners on the same page.

  4. Ensure spinners are accessible to all users.

  5. Match spinner size and style to the context (button, inline, or page-level).

Practical Examples

  • Form Submission: Show spinner inside a submit button.

  • Data Fetching: Display spinner while loading tables or charts.

  • Content Loading: Centered spinner on a modal or card while waiting for content.

  • Inline Indicators: Small spinner next to a label to indicate a small process.

  • Multiple Processes: Different colored spinners representing parallel tasks.

Summary of the Tutorial

Bootstrap 4 spinners are flexible, lightweight, and visually effective indicators for ongoing processes. They come in border and growing types, with multiple sizes and colors. Spinners can be used inside buttons, inline with text, or as standalone indicators. By using spinners effectively, you can enhance user experience, provide clear feedback, and create polished, professional interfaces.

Practice Questions

  1. Create a basic border spinner with the Primary color.

  2. Create a growing spinner with the Success color.

  3. Create a small border spinner using .spinner-border-sm with the Danger color.

  4. Create a small growing spinner using .spinner-grow-sm with the Warning color.

  5. Create a border spinner inside a disabled Primary button with the text “Loading...”.

  6. Create three growing spinners of different colors (Primary, Success, Danger) displayed in a row.

  7. Create an inline spinner next to a sentence, e.g., “Fetching data,” using a small border spinner.

  8. Create a spinner with a custom size of 3rem and a slower animation speed using CSS.

  9. Create multiple spinners on a page representing parallel processes, each with a different color and type.

  10. Create a spinner with proper accessibility attributes (role="status" and .sr-only) inside a button labeled “Processing.”

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top