Spinnere

Angiv indlæsningstilstanden for en komponent eller side med Bootstrap-spinnere, bygget udelukkende med HTML, CSS og uden JavaScript.

På denne side

Om

Bootstrap "spinnere" kan bruges til at vise indlæsningstilstanden i dine projekter. De er kun bygget med HTML og CSS, hvilket betyder, at du ikke behøver noget JavaScript for at oprette dem. Du skal dog bruge noget tilpasset JavaScript for at skifte deres synlighed. Deres udseende, justering og størrelse kan nemt tilpasses med vores fantastiske hjælpeklasser.

Af tilgængelighedsformål inkluderer hver indlæser her role="status"og en indlejret <span class="visually-hidden">Loading...</span>.

Animationseffekten af denne komponent afhænger af prefers-reduced-motionmedieforespørgslen. Se afsnittet om reduceret bevægelse i vores tilgængelighedsdokumentation .

Border spinner

Brug kantspinnerne til en letvægtsbelastningsindikator.

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

Farver

Border spinneren bruger currentColortil sin border-color, hvilket betyder at du kan tilpasse farven med tekstfarveværktøjer . Du kan bruge alle vores tekstfarveværktøjer på standardspinneren.

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

Hvorfor ikke bruge border-colorhjælpeprogrammer? Hver border spinner angiver en transparentkant for mindst én side, så .border-{color}hjælpeprogrammer ville tilsidesætte det.

Voksende spinner

Hvis du ikke har lyst til en border spinner, så skift til grow spinneren. Selvom det teknisk set ikke spinner, vokser det gentagne gange!

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

Endnu en gang er denne spinner bygget med currentColor, så du nemt kan ændre dens udseende med tekstfarveværktøjer . Her er den i blåt sammen med de understøttede varianter.

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

Justering

Spinnere i Bootstrap er bygget med rems, currentColor, og display: inline-flex. Dette betyder, at de nemt kan ændres i størrelse, omfarves og hurtigt justeres.

Margin

Brug marginværktøjer som .m-5for nem afstand.

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

Placering

Brug flexbox-værktøjer , float-værktøjer eller tekstjusteringsværktøjer til at placere spinnere præcis, hvor du har brug for dem i enhver situation.

Flex

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

Indlæser...

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

Flyder

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

Tekstjustering

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

Størrelse

Tilføj .spinner-border-smog .spinner-grow-smfor at lave en mindre spinner, der hurtigt kan bruges i andre komponenter.

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

Eller brug tilpassede CSS- eller inline-stile til at ændre dimensionerne efter behov.

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

Knapper

Brug spinnere i knapperne til at angive, at en handling i øjeblikket behandles eller finder sted. Du kan også skifte teksten ud af spinner-elementet og bruge knaptekst efter behov.

<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

Variabler

$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;

Keyframes

Bruges til at lave CSS-animationer til vores spinnere. Inkluderet i scss/_spinners.scss.

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

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