Bootstrap 5 Lader

Loader

Gebruik om een spinner/loader te maken: .spinner-border Soort:

Voorbeeld

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

Probeer het zelf

Kleurige loader

Gebruik een willekeurige tekstkleur utility om de spinner een kleur toe te voegen:

Voorbeeld

<div class="spinner-border text-muted"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>

Probeer het zelf

Groeiende loader

Als je een groeiende loader wilt gebruiken in plaats van een "rotatie", gebruik dan: .spinner-grow Soort:

Voorbeeld

<div class="spinner-grow text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>

Probeer het zelf

Loadergrootte

Gebruik .spinner-border-sm of .spinner-grow-sm Maak een kleinere loader aan:

Voorbeeld

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

Probeer het zelf

Loaderknop

Je kunt ook een loader toevoegen aan de knop, met of zonder tekst:

Voorbeeld

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Laden..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Laden..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Laden..
</button>

Probeer het zelf