Around Buy now

Spinners

Indicate the loading state of a component or page.

Bootstrap docs

Border spinner

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

<!-- 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 (default) spinner
div(role="status").spinner-border
  span.visually-hidden
    | Loading...

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

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

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

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

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

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

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

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

Growing spinner

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

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

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

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

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

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

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

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

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

// Light spinner
div(role="status").spinner-grow.text-light
  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