Bootstrap 4 Spinners

Welcome to The Coding College! This guide will teach you how to use Bootstrap 4 Spinners, a lightweight component used to indicate a loading state. Spinners are an essential part of modern web development, improving user experience by providing visual feedback during long-running processes.

By the end of this tutorial, you’ll know how to create, style, and customize spinners using Bootstrap 4.

What Are Bootstrap 4 Spinners?

Spinners are simple and visually appealing components that signal to users that an action is in progress, such as loading data, submitting forms, or processing a request. Bootstrap 4 spinners use CSS animations and are lightweight and fully customizable.

Basic Spinner

Bootstrap 4 spinners can be created using the .spinner-border class for a border-based spinner.

Example:

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

Explanation:

  • .spinner-border: Creates the spinner animation.
  • role="status": Defines the spinner’s role for accessibility purposes.
  • <span class="sr-only">Loading...</span>: Provides screen readers with a description of the spinner.

Spinner Colors

You can use contextual color classes such as .text-primary, .text-success, and others to style the spinner in various colors.

Example:

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

Growing Spinner

For an alternative look, use the .spinner-grow class to create a growing spinner instead of a rotating border.

Example:

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

Sizing Spinners

Bootstrap 4 allows you to control spinner sizes using utility classes like .spinner-border-sm or .spinner-grow-sm for smaller spinners. You can also adjust the size manually with custom CSS.

Example:

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

<!-- Large Spinner with Custom CSS -->  
<div class="spinner-border" style="width: 4rem; height: 4rem;" role="status">  
  <span class="sr-only">Loading...</span>  
</div>

Spinners Inside Buttons

Spinners are often used inside buttons to indicate ongoing actions like loading or submitting forms.

Example:

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

Customizing Spinners with CSS

If the default spinners don’t fit your design, you can customize them with custom CSS.

Example:

<style>  
  .custom-spinner {  
    width: 3rem;  
    height: 3rem;  
    border: 0.3rem solid #ccc;  
    border-top: 0.3rem solid #007bff;  
    animation: spin 1s linear infinite;  
  }  

  @keyframes spin {  
    from { transform: rotate(0deg); }  
    to { transform: rotate(360deg); }  
  }  
</style>  

<div class="custom-spinner"></div>

Accessibility Considerations

For better accessibility:

  • Use role="status" to indicate that the spinner represents a loading state.
  • Add a visually hidden <span> with descriptive text (e.g., “Loading…”).
  • Avoid using spinners as the sole indicator of progress—combine them with text when possible.

Practical Example: Spinners in Action

Here’s a complete example demonstrating the use of Bootstrap 4 spinners:

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Bootstrap 4 Spinners</title>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  
</head>  
<body>  
  <div class="container my-5">  
    <h1 class="text-center text-primary">Bootstrap 4 Spinners</h1>  

    <!-- Basic Spinner -->  
    <h3>Basic Spinner</h3>  
    <div class="spinner-border" role="status">  
      <span class="sr-only">Loading...</span>  
    </div>  

    <!-- Colored Spinners -->  
    <h3 class="mt-4">Colored Spinners</h3>  
    <div class="spinner-border text-success" role="status"></div>  
    <div class="spinner-border text-danger" role="status"></div>  
    <div class="spinner-border text-warning" role="status"></div>  

    <!-- Growing Spinners -->  
    <h3 class="mt-4">Growing Spinners</h3>  
    <div class="spinner-grow text-info" role="status"></div>  
    <div class="spinner-grow text-primary" role="status"></div>  

    <!-- Spinners in Buttons -->  
    <h3 class="mt-4">Spinners in Buttons</h3>  
    <button class="btn btn-primary" type="button" disabled>  
      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>  
      Loading...  
    </button>  

    <!-- Custom Spinner -->  
    <h3 class="mt-4">Custom Spinner</h3>  
    <div class="custom-spinner"></div>  

  </div>  

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>  
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>  
</body>  
</html>

Learn More with The Coding College

Bootstrap 4 Spinners are versatile and essential for creating responsive web applications. Whether you’re adding loading indicators to buttons or creating custom animations, Bootstrap spinners are easy to use and fully customizable.

Leave a Comment