Spinneri

Norādiet komponenta vai lapas ielādes stāvokli, izmantojot Bootstrap vērpējus, kas pilnībā izveidoti, izmantojot HTML, CSS un bez JavaScript.

Šajā lapā

Par

Bootstrap “spinnerus” var izmantot, lai jūsu projektos parādītu ielādes stāvokli. Tie ir veidoti tikai ar HTML un CSS, kas nozīmē, ka to izveidei nav nepieciešams JavaScript. Tomēr jums būs nepieciešams pielāgots JavaScript, lai pārslēgtu to redzamību. To izskatu, izlīdzināšanu un izmērus var viegli pielāgot, izmantojot mūsu pārsteidzošās lietderības klases.

Pieejamības nolūkos katrs ielādētājs šeit ietver role="status"un ligzdotu <span class="visually-hidden">Loading...</span>.

Šī komponenta animācijas efekts ir atkarīgs no prefers-reduced-motionmultivides vaicājuma. Skatiet mūsu pieejamības dokumentācijas sadaļu samazinātas kustības .

Robežvērpējs

Izmantojiet apmales griezējus, lai iegūtu vieglu iekraušanas indikatoru.

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

Krāsas

Apmales vērpējs izmanto currentColorto border-color, kas nozīmē, ka varat pielāgot krāsu, izmantojot teksta krāsu utilītas . Varat izmantot jebkuru no mūsu teksta krāsu utilītprogrammām uz standarta vērpēja.

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

Kāpēc neizmantot border-colorkomunālos pakalpojumus? Katrs apmales griezējs norāda transparentapmali vismaz vienai pusei, tāpēc .border-{color}utilītas to ignorēs.

Augošs vērpējs

Ja jums nepatīk apmales vērpējs, pārslēdzieties uz augšanas vērpēju. Lai gan tas tehniski negriežas, tas atkārtoti aug!

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

Atkal šis vērpējs ir veidots ar currentColor, tāpēc jūs varat viegli mainīt tā izskatu, izmantojot teksta krāsu utilītas . Šeit tas ir zilā krāsā kopā ar atbalstītajiem variantiem.

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

Izlīdzināšana

Bootstrap vērpēji ir veidoti ar rems, currentColor, un display: inline-flex. Tas nozīmē, ka to izmērus var viegli mainīt, pārkrāsot un ātri izlīdzināt.

Marža

Izmantojiet piemales utilītas , piemēram .m-5, lai atvieglotu atstarpi.

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

Izvietojums

Izmantojiet flexbox utilītas , peldošās utilītprogrammas vai teksta līdzināšanas utilītas, lai jebkurā situācijā novietotu spinnerus tieši tur, kur tie ir nepieciešami.

Flex

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

Notiek ielāde...

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

Pludiņi

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

Teksta līdzināšana

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

Izmērs

Pievienojiet .spinner-border-smun .spinner-grow-smizveidojiet mazāku vērptuvi, ko var ātri izmantot citos komponentos.

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

Vai arī izmantojiet pielāgotus CSS vai iekļautos stilus, lai pēc vajadzības mainītu izmērus.

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

Pogas

Izmantojiet pogās esošos griežņus, lai norādītu, kāda darbība pašlaik tiek apstrādāta vai notiek. Varat arī apmainīt tekstu no rotējošā elementa un pēc vajadzības izmantot pogas tekstu.

<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

Mainīgie lielumi

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

Atslēgkadri

Izmanto, lai izveidotu CSS animācijas mūsu vērpējiem. Iekļauts scss/_spinners.scss.

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

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