# Spinners

Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.

## Border spinner

Loading...

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

## Colors

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

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

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

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

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

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

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

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

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

## Growing spinner

Loading...

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

## Growing spinner

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

    <!--primary growing spinner-->
    <div class="spinner-grow text-primary" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
      <!--secondary growing spinner-->
    <div class="spinner-grow text-secondary" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
      <!--success growing spinner-->
    <div class="spinner-grow text-success" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
      <!--dDanger growing spinner-->
    <div class="spinner-grow text-danger" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
      <!--warning growing spinner-->
    <div class="spinner-grow text-warning" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
      <!--info growing spinner-->
    <div class="spinner-grow text-info" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
      <!--light growing spinner-->
    <div class="spinner-grow text-light" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
      <!--dark growing spinner-->
    <div class="spinner-grow text-dark" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>

### Alignment

Spinners in Bootstrap are built with rem s, currenttColor , and display: inline-flex. This means they can easily be resized, recolored, and quickly aligned.

## Margin

Loading...

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

### Placement

Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly where you need them in any situation.

## Flex

Loading...

    <!--placement flex center-->
    <div class="d-flex justify-content-center">
      <div class="spinner-border" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div>

## Float

Loading...

     <!--Floats-->
    <div class="clearfix">
      <div class="spinner-border float-end" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div>

## Text align

Loading...

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

## Size small

Loading...
Loading...

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

## Size large

Loading...
Loading...

    <!--size dimensions change-->
    <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>
    <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>

## Buttons spinner

    <!--button spinner-->
    <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">Loading...</span>
    </button>
    <button class="btn btn-primary" type="button" disabled>
      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
      Loading...
    </button>

## Buttons grow

    <!--button growing-->
    <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">Loading...</span>
    </button>
    <button class="btn btn-primary" type="button" disabled>
      <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
      Loading...
    </button>