Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# Spinners

Indicate the loading state of a component or page.

Bootstrap docs

## Border spinner

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

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

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

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

    <!-- Accent spinner -->
    <div class="spinner-border text-accent" 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>

## Growing spinner

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

    <!-- Dark (default) spinner -->
    <div class="spinner-grow" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>

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

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

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

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

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

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

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

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

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

## Size

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

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

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

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

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

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

    <!-- Custom size growing spinner -->
    <div class="spinner-grow" style="width: 3.5rem; height: 3.5rem;" role="status">
      <span class="visually-hidden">Loading...</span>
    </div>

## Inside button

    <!-- Primary button with border spinner -->
    <button type="button" class="btn btn-primary btn-icon pe-none">
      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    </button>

    <!-- Primary button with border spinner and text -->
    <button type="button" class="btn btn-primary pe-none">
      <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
      Loading...
    </button>

    <!-- Secondary button with growing spinner -->
    <button type="button" class="btn btn-secondary btn-icon pe-none">
      <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
    </button>

    <!-- Secondary button with growing spinner and text -->
    <button type="button" class="btn btn-secondary pe-none">
      <span class="spinner-grow spinner-grow-sm me-2" role="status" aria-hidden="true"></span>
      Loading...
    </button>

Top