Spinners

Indicate the loading state of a component or page with spinners.

Material Design Spinner

html

<div class="spinner-material text-primary">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none" />
  </svg>
</div>

Color Options

CODE

html

<div class="spinner-material text-primary">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none" />
  </svg>
</div>

html

<div class="spinner-material text-secondary">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none" />
  </svg>
</div>

html

<div class="spinner-material text-tertiary">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none" />
  </svg>
</div>

html

<div class="spinner-material text-success">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none" />
  </svg>
</div>

html

<div class="spinner-material text-info">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none" />
  </svg>
</div>

html

<div class="spinner-material text-warning">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none" />
  </svg>
</div>

html

<div class="spinner-material text-danger">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none" />
  </svg>
</div>

html

<div class="spinner-material text-light">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none" />
  </svg>
</div>

html

<div class="spinner-material text-dark">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none" />
  </svg>
</div>

Rainbow Spinner

CODE

html

<div class="spinner-material spinner-rainbow">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none" />
  </svg>
</div>

Small

CODE

html

<div class="spinner-material spinner-material-sm text-primary">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none" />
  </svg>
</div>

Bootstrap Spinner

CODE

html

<div class="spinner-border text-primary"></div>

Color options

CODE

html

<div class="spinner-border text-primary"></div>

html

<div class="spinner-border text-secondary"></div>

html

<div class="spinner-border text-tertiary"></div>

html

<div class="spinner-border text-success"></div>

html

<div class="spinner-border text-info"></div>

html

<div class="spinner-border text-warning"></div>

html

<div class="spinner-border text-danger"></div>

html

<div class="spinner-border text-light"></div>

html

<div class="spinner-border text-dark"></div>

Bootstrap Spinner Grow

CODE

html

<div class="spinner-grow text-primary"></div>

Color options

CODE

html

<div class="spinner-grow text-primary"></div>

html

<div class="spinner-grow text-secondary"></div>

html

<div class="spinner-grow text-tertiary"></div>

html

<div class="spinner-grow text-success"></div>

html

<div class="spinner-grow text-info"></div>

html

<div class="spinner-grow text-warning"></div>

html

<div class="spinner-grow text-danger"></div>

html

<div class="spinner-grow text-light"></div>

html

<div class="spinner-grow text-dark"></div>

Small

CODE

html

<div class="spinner-border spinner-border-sm"></div>

html

<div class="spinner-grow spinner-grow-sm"></div>

Theme Builder

Personalize Material Style to reflect your product's brand identity.

CONTENTS