Bootstrap 5.2 / Componenten

Spinners

Geef de laadstatus van een component of pagina aan met Bootstrap-spinners, volledig gebouwd met HTML en CSS en zonder JavaScript.

Over

Bootstrap-"spinners" kun je gebruiken om de laadstatus in je projecten te tonen. Ze zijn alleen met HTML en CSS gebouwd, dus je hebt geen JavaScript nodig om ze te maken. Wel heb je wat eigen JavaScript nodig om hun zichtbaarheid te schakelen. Hun uiterlijk, uitlijning en afmetingen kun je eenvoudig aanpassen met onze fantastische utility-klassen.

Voor de toegankelijkheid bevat elke loader hier role="status" en een geneste <span class="visually-hidden">Laden...</span>.

Let op

Animaties en overgangen houden rekening met de instelling prefers-reduced-motion. Heeft een bezoeker in het besturingssysteem om minder beweging gevraagd, dan vallen overgangen weg.

Border-spinner

Gebruik de border-spinners voor een lichtgewicht laadindicator.

HTML

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

Kleuren

De border-spinner gebruikt currentColor voor zijn border-color, wat betekent dat je de kleur met tekstkleur-utilities kunt aanpassen. Je kunt al onze tekstkleur-utilities op de standaardspinner gebruiken.

HTML

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

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

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

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

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

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

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

<div class="spinner-border text-dark" role="status">
  <span class="visually-hidden">Laden...</span>
</div>

Let op

Waarom geen border-color-utilities gebruiken? Elke border-spinner geeft voor minstens één zijde een transparent rand op, dus .border-{color}-utilities zouden die overschrijven.

Groeiende spinner

Voel je niks voor een border-spinner, schakel dan over naar de grow-spinner. Die draait technisch gezien niet, maar groeit steeds opnieuw!

HTML

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Laden...</span>
</div>

Ook deze spinner is met currentColor gebouwd, dus je kunt het uiterlijk eenvoudig wijzigen met tekstkleur-utilities. Hier is hij in blauw, samen met de ondersteunde varianten.

HTML

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

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

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

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

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

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

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

<div class="spinner-grow text-dark" role="status">
  <span class="visually-hidden">Laden...</span>
</div>

Uitlijning

Spinners in Bootstrap zijn gebouwd met rems, currentColor en display: inline-flex. Dat betekent dat je ze eenvoudig kunt schalen, verkleuren en snel kunt uitlijnen.

Marge

Gebruik margin-utilities zoals .m-5 voor eenvoudige tussenruimte.

HTML

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Laden...</span>
</div>

Plaatsing

Gebruik flexbox-utilities, float-utilities of tekstuitlijnings-utilities om spinners in elke situatie precies daar te plaatsen waar je ze nodig hebt.

Flex

HTML

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Laden...</span>
  </div>
</div>

HTML

<div class="d-flex align-items-center">
  <strong>Laden...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

Floats

HTML

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Laden...</span>
  </div>
</div>

Tekstuitlijning

HTML

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Laden...</span>
  </div>
</div>

Formaat

Voeg .spinner-border-sm en .spinner-grow-sm toe om een kleinere spinner te maken die je snel binnen andere componenten kunt gebruiken.

HTML

<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Laden...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="visually-hidden">Laden...</span>
</div>

Of gebruik eigen CSS of inline stijlen om de afmetingen naar behoefte te wijzigen.

HTML

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Laden...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Laden...</span>
</div>

Knoppen

Gebruik spinners binnen knoppen om aan te geven dat er momenteel een actie wordt verwerkt of plaatsvindt. Je kunt de tekst in het spinner-element ook weglaten en naar behoefte de knoptekst gebruiken.

HTML

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Laden...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Laden...
</button>

HTML

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Laden...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Laden...
</button>

CSS

Variabelen

Nieuw in v5.2.0

Als onderdeel van Bootstraps groeiende aanpak met CSS-variabelen gebruiken spinners nu lokale CSS-variabelen op .spinner-border en .spinner-grow, voor betere aanpassingen in realtime. De waarden voor de CSS-variabelen worden via Sass ingesteld, dus aanpassen via Sass wordt nog steeds ondersteund.

Variabelen van de border-spinner:

Standaardwaarden: zie scss/_spinners.scss in de Bootstrap-broncode.

Variabelen van de groeiende spinner:

Standaardwaarden: zie scss/_spinners.scss in de Bootstrap-broncode.

Voor beide spinners worden modifier-klassen voor kleine spinners gebruikt om de waarden van deze CSS-variabelen naar behoefte bij te werken. Zo doet de klasse .spinner-border-sm het volgende:

Standaardwaarden: zie scss/_spinners.scss in de Bootstrap-broncode.

Sass-variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Keyframes

Worden gebruikt om de CSS-animaties voor onze spinners te maken. Opgenomen in scss/_spinners.scss.

Standaardwaarden: zie scss/_spinners.scss in de Bootstrap-broncode.