Bootstrap - Spinners

This chapter will discuss about Bootstrap spinners. Bootstrap spinner display the loading state of projects using .spinner class.

How it works

  • Bootstrap spinners show the loading state of a project, using HTML and CSS. JavaScript is not required to build them.

  • Custom JavaScript is needed to toggle their visibility. Appearance, alignment, and sizing can be easily customized with Bootstrap's utility classes.

  • Each loader has role="status" and a nested <span class="visually-hidden">Loading... </span > for accessibility.

Border spinner

Use .spinner-border class to create lightweight spinner/loading indicator.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h3>Border Spinner</h3>
      <div class="spinner-border mt-2" role="status">
        <span class="spinner-grow text-white spinner-grow-sm" role="status"></span>
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

Colors

Border spinner uses currentColor for its border-color, which is customizable with text color utilities. Use text color utilities on a standard spinner.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h3>Colored Spinner</h3>
      <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-border text-secondary" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-border text-success" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-border text-danger" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-border text-warning" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-border text-info" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-border text-light" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-border text-dark" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>
Why not use border-color utilities? Border spinners have transparent border on one side, overridden by .border-{color} utilities.

Growing spinner

  • You can change the spin type of spinner to the grow spinner. It technically doesn't rotate, but it repeatedly grows.

  • Use .spinner-grow class to create grow spinner.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h3>Growing Spinner</h3>
      <div class="spinner-grow" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

This spinner uses currentColor to change its appearance with text color utilities.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h3>Growing color Spinners</h3>
      <div class="spinner-grow text-primary" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow text-secondary" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow text-info" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow text-dark" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow text-warning" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow text-success" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow text-light" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow text-danger" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

Alignment

Bootstrap spinners are designed with rems, currentColor, and display: inline-flex. They are easily resizable, recolorable, and alignable.

Margin

For simple spacing, use margin utilities like .m-4.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h3>Margin</h3>
      <div class="spinner-border m-4" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

Placement

Bootstrap spinners can be placed using flexbox utilities, float utilities, or text alignment utilities.

Flex

Use flexbox placement classes to set the position of spinners.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="text-center">Flex placement at start, center, end</h5>
      <div class="d-flex justify-content-start">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
      <div class="d-flex justify-content-center">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
      <div class="d-flex justify-content-end">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
    </body>
    </html>

You can change spinner alignment using flexbox placement.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="d-flex align-items-end mt-2">
        <h5 class="text-center">Flex placement</h5>
        <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
      </div>
    </body>
    </html>

Float

Use float placement classees to set the position of spinners.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5>Float placement at start and end</h5>
      <div class="clearfix float-start mt-2">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>

      <div class="clearfix float-end">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
    </body>
    </html>

Text align

Use .text-align placement classes to set the position of spinners items.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="text-center">Text Align at start, center, end</h5>
      <div class="text-start">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
      <div class="text-center">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
      <div class="text-end">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
    </body>
    </html>

Size

Spinner size can be used to create spinners of various sizes.

  • For small-size spinners, use .spinner-border-sm and .spinner-grow-sm classes.

  • For medium-size spinners, use .spinner-border-md and .spinner-grow-md classes.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="mt-2">Small Size Spinner</h5>
      <div class="spinner-border spinner-border-sm text" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow spinner-grow-sm" role="status">
        <span class="visually-hidden"></span>
      </div>
      <h5 class="mt-2">Medium Size Spinner</h5>
      <div class="spinner-border spinner-border-md" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow spinner-grow-md" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

To modify the dimensions as required, use custom CSS or inline styles.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="mt-2">Spinner using custom CSS</h5>
      <div class="spinner-border" style="width: 2rem; height: 2rem;" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow" style="width: 2rem; height: 2rem;" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

Buttons

  • Button spinners are used to show an action that is currently processing. Replace spinner element text with button text if required.

  • Use .btn and .spinner-border class to create spinner button.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="mt-2">Spinner Buttons</h5>
      <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        <span class="visually-hidden"></span>
      </button>
      <button class="btn btn-secondary" type="button" disabled>
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        Wait...
      </button>
    </body>
    </html>

Use .btn and .spinner-grow class to create growing spinner buttons.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="mt-2">Growing Spinner Buttons</h5>
      <button class="btn btn-primary" type="button" disabled>
        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
        <span class="visually-hidden">Wait...</span>
      </button>
      <button class="btn btn-secondary" type="button" disabled>
        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
       Wait...
      </button>
    </body>
    </html>
Advertisements