Spiners

Tregoni gjendjen e ngarkimit të një komponenti ose faqeje me spinners Bootstrap, të ndërtuar tërësisht me HTML, CSS dhe pa JavaScript.

Në këtë faqe

Rreth

"Spinners" Bootstrap mund të përdoren për të treguar gjendjen e ngarkimit në projektet tuaja. Ato janë ndërtuar vetëm me HTML dhe CSS, që do të thotë se nuk keni nevojë për ndonjë JavaScript për t'i krijuar ato. Sidoqoftë, do t'ju duhet disa JavaScript me porosi për të ndryshuar dukshmërinë e tyre. Pamja, shtrirja dhe madhësia e tyre mund të personalizohen lehtësisht me klasat tona të mrekullueshme të shërbimeve.

Për qëllime të aksesueshmërisë, çdo ngarkues këtu përfshin role="status"dhe një të mbivendosur <span class="visually-hidden">Loading...</span>.

Efekti i animacionit të këtij komponenti varet nga prefers-reduced-motionpyetja e medias. Shikoni seksionin e lëvizjes së reduktuar të dokumentacionit tonë të aksesueshmërisë .

rrotullues kufiri

Përdorni rrotulluesit kufitar për një tregues ngarkimi të lehtë.

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

Ngjyrat

Rrotulluesi i kufirit përdor currentColorpër të border-color, që do të thotë se mund ta personalizoni ngjyrën me mjetet ndihmëse të ngjyrave të tekstit . Ju mund të përdorni cilindo nga mjetet tona të ngjyrave të tekstit në rrotulluesin standard.

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

Pse të mos përdorni border-colorshërbimet komunale? Çdo rrotullues kufiri specifikon një transparentkufi për të paktën njërën anë, kështu që .border-{color}shërbimet komunale do ta anashkalonin atë.

Spiner në rritje

Nëse nuk ju pëlqen një rrotullues kufiri, kaloni në rrotulluesin e rritjes. Ndërsa teknikisht nuk rrotullohet, ai rritet vazhdimisht!

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

Edhe një herë, ky rrotullues është ndërtuar me currentColor, kështu që ju mund ta ndryshoni me lehtësi pamjen e tij me mjetet ndihmëse të ngjyrave të tekstit . Këtu është në ngjyrë blu, së bashku me variantet e mbështetura.

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

Radhitje

Spinnerët në Bootstrap janë ndërtuar me rems, currentColor, dhe display: inline-flex. Kjo do të thotë se ato mund të ndryshohen lehtësisht, të ringjyrohen dhe të rreshtohen shpejt.

Marzhi

Përdorni mjetet e marzhit si .m-5për ndarje të lehtë.

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

Vendosja

Përdorni programet ndihmëse flexbox , shërbimet float ose programet e shtrirjes së tekstit për të vendosur rrotulluesit pikërisht aty ku ju nevojiten në çdo situatë.

Përkul

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

Po ngarkohet...

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

Noton

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

Përafrimi i tekstit

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

Madhësia

Shtoni .spinner-border-smdhe .spinner-grow-smpër të bërë një rrotullues më të vogël që mund të përdoret shpejt brenda komponentëve të tjerë.

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

Ose, përdorni stile të personalizuara CSS ose inline për të ndryshuar dimensionet sipas nevojës.

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

Butonat

Përdorni rrotulluesit brenda butonave për të treguar se një veprim po përpunohet ose po ndodh aktualisht. Ju gjithashtu mund të ndërroni tekstin nga elementi rrotullues dhe të përdorni tekstin e butonit sipas nevojës.

<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

Variablat

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

Kornizat kryesore

Përdoret për krijimin e animacioneve CSS për spinnerët tanë. Të përfshira në scss/_spinners.scss.

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

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