Finder Buy now

Spinners

Indicate the loading state of a component or page.

Bootstrap docs

Border spinner

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

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

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

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

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

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

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

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

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

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

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

// Gray (muted) border spinner
div(role="status").spinner-border.text-muted
  span.visually-hidden
    | Loading...

// Primary border spinner
div(role="status").spinner-border.text-primary
  span.visually-hidden
    | Loading...

// Accent border spinner
div(role="status").spinner-border.text-accent
  span.visually-hidden
    | Loading...

// Secondary border spinner
div(role="status").spinner-border.text-secondary
  span.visually-hidden
    | Loading...

// Success border spinner
div(role="status").spinner-border.text-success
  span.visually-hidden
    | Loading...

// Danger border spinner
div(role="status").spinner-border.text-danger
  span.visually-hidden
    | Loading...

// Warning border spinner
div(role="status").spinner-border.text-warning
  span.visually-hidden
    | Loading...

// Info border spinner
div(role="status").spinner-border.text-info
  span.visually-hidden
    | Loading...

// Light border spinner
div(role="status").spinner-border.text-light
  span.visually-hidden
    | Loading...

// Dark border spinner
div(role="status").spinner-border.text-dark
  span.visually-hidden
    | Loading...

Growing spinner

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

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

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

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

<!-- Danger 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>
// Default growing spinner
div(role="status").spinner-grow
  span.visually-hidden
    | Loading...

// Gray (muted) growing spinner
div(role="status").spinner-grow.text-muted
  span.visually-hidden
    | Loading...

// Primary growing spinner
div(role="status").spinner-grow.text-primary
  span.visually-hidden
    | Loading...

// Accent growing spinner
div(role="status").spinner-grow.text-accent
  span.visually-hidden
    | Loading...

// Secondary growing spinner
div(role="status").spinner-grow.text-secondary
  span.visually-hidden
    | Loading...

// Success growing spinner
div(role="status").spinner-grow.text-success
  span.visually-hidden
    | Loading...

// Danger growing spinner
div(role="status").spinner-grow.text-danger
  span.visually-hidden
    | Loading...

// Warning growing spinner
div(role="status").spinner-grow.text-warning
  span.visually-hidden
    | Loading...

// Info growing spinner
div(role="status").spinner-grow.text-info
  span.visually-hidden
    | Loading...

// Light growing spinner
div(role="status").spinner-grow.text-light
  span.visually-hidden
    | Loading...

// Dark growing spinner
div(role="status").spinner-grow.text-dark
  span.visually-hidden
    | Loading...

Size

<!-- 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>

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

<!-- Custom size growing spinner -->
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
// Small border spinner
div(role="status").spinner-border.spinner-border-sm
  span.visually-hidden
    | Loading...

// Small growing spinner
div(role="status").spinner-grow.spinner-grow-sm
  span.visually-hidden
    | Loading...

// Custom size border spinner
div(style="width: 3rem; height: 3rem;", role="status").spinner-border
  span.visually-hidden
    | Loading...

// Custom size growing spinner
div(style="width: 3rem; height: 3rem;", role="status").spinner-grow
  span.visually-hidden
    | Loading...

Inside button

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

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

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

<!-- Button with growing spinner and text -->
<button type="button" class="btn btn-secondary">
  <span class="spinner-grow spinner-grow-sm me-2" role="status" aria-hidden="true"></span>
  Loading...
</button>
// Button with border spinner
button(type="button").btn.btn-primary.btn-icon
  span(role="status", aria-hidden="true").spinner-border.spinner-border-sm

// Button with border spinner and text
button(type="button").btn.btn-primary
  span(role="status", aria-hidden="true").spinner-border.spinner-border-sm.me-2
  | Loading...

// Button with growing spinner
button(type="button").btn.btn-secondary.btn-icon
  span(role="status", aria-hidden="true").spinner-grow.spinner-grow-sm

// Button with growing spinner and text
button(type="button").btn.btn-secondary
  span(role="status", aria-hidden="true").spinner-grow.spinner-grow-sm.me-2
  | Loading...
Top