in English

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.

html

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

html

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

html

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

html

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

html

<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

html

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

Notiek ielāde...

html

<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

html

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

Teksta līdzināšana

html

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

html

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

html

<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, ka 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.

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

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

CSS

Mainīgie

Pievienots v5.2.0

Kā daļu no Bootstrap attīstošās CSS mainīgo pieejas, vērpēji tagad izmanto vietējos CSS mainīgos, .spinner-borderlai .spinner-growuzlabotu reāllaika pielāgošanu. CSS mainīgo vērtības tiek iestatītas, izmantojot Sass, tāpēc joprojām tiek atbalstīta arī Sass pielāgošana.

Apmales griezēja mainīgie:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-border-width: #{$spinner-border-width};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-border;

Augošā spinera mainīgie:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-grow;

Abiem vērpējiem tiek izmantotas mazas vērpšanas modifikatoru klases, lai pēc vajadzības atjauninātu šo CSS mainīgo vērtības. Piemēram, .spinner-border-smklase veic šādas darbības:

  --#{$prefix}spinner-width: #{$spinner-width-sm};
  --#{$prefix}spinner-height: #{$spinner-height-sm};
  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

Sass mainīgie

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