Spinners

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

Op deze pagina

Over

Bootstrap "spinners" kunnen worden gebruikt om de laadstatus in uw projecten te tonen. Ze zijn alleen gebouwd met HTML en CSS, wat betekent dat je geen JavaScript nodig hebt om ze te maken. U hebt echter wat aangepast JavaScript nodig om hun zichtbaarheid te wijzigen. Hun uiterlijk, uitlijning en maatvoering kunnen eenvoudig worden aangepast met onze geweldige hulpprogramma's.

Voor toegankelijkheidsdoeleinden bevat elke lader hier role="status"en een geneste <span class="visually-hidden">Loading...</span>.

Het animatie-effect van deze component is afhankelijk van de prefers-reduced-motionmediaquery. Zie het gedeelte over beperkte beweging van onze toegankelijkheidsdocumentatie .

Grens spinner

Gebruik de randspinners voor een lichtgewicht laadindicator.

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

Kleuren

De border spinner gebruikt currentColorvoor zijn border-color, wat betekent dat je de kleur kunt aanpassen met hulpprogramma 's voor tekstkleur . U kunt elk van onze hulpprogramma's voor tekstkleur gebruiken op de standaard spinner.

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Waarom geen border-colorhulpprogramma's gebruiken? Elke randspinner specificeert een transparentrand voor ten minste één zijde, dus .border-{color}hulpprogramma's zouden die overschrijven.

Groeiende spinner

Als je geen zin hebt in een borderspinner, schakel dan over naar de kweekspinner. Hoewel het technisch gezien niet ronddraait, groeit het wel herhaaldelijk!

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

Nogmaals, deze spinner is gebouwd met currentColor, dus je kunt het uiterlijk gemakkelijk veranderen met hulpprogramma's voor tekstkleur . Hier is het in het blauw, samen met de ondersteunde varianten.

<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Uitlijning

Spinners in Bootstrap zijn gebouwd met rems, currentColor, en display: inline-flex. Dit betekent dat ze gemakkelijk kunnen worden vergroot of verkleind, opnieuw kunnen worden gekleurd en snel kunnen worden uitgelijnd.

Marge

Gebruik margehulpprogramma's zoals .m-5voor gemakkelijke spatiëring.

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

Plaatsing

Gebruik flexbox-hulpprogramma's , float-hulpprogramma's of hulpprogramma's voor tekstuitlijning om spinners precies daar te plaatsen waar u ze in elke situatie nodig hebt.

Buigen

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

Bezig met laden...

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

drijft

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

Tekst uitlijnen

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

Maat

Voeg toe .spinner-border-smen .spinner-grow-smom een kleinere spinner te maken die snel in andere componenten kan worden gebruikt.

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

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

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

Toetsen

Gebruik spinners binnen knoppen om aan te geven dat een actie momenteel wordt verwerkt of plaatsvindt. U kunt de tekst ook uit het spinnerelement verwisselen en indien nodig knoptekst gebruiken.

<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">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

<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">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

Sass

Variabelen

$spinner-width:           2rem;
$spinner-height:          $spinner-width;
$spinner-vertical-align:  -.125em;
$spinner-border-width:    .25em;
$spinner-animation-speed: .75s;

$spinner-width-sm:        1rem;
$spinner-height-sm:       $spinner-width-sm;
$spinner-border-width-sm: .2em;

Sleutelframes

Gebruikt voor het maken van de CSS-animaties voor onze spinners. Inbegrepen in scss/_spinners.scss.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}