Ŝpiniloj

Indiku la ŝarĝan staton de komponanto aŭ paĝo per Bootstrap-spiniloj, konstruitaj tute kun HTML, CSS, kaj sen JavaScript.

Sur ĉi tiu paĝo

Pri

Bootstrap "spinners" povas esti uzata por montri la ŝarĝan staton en viaj projektoj. Ili estas konstruitaj nur kun HTML kaj CSS, tio signifas, ke vi ne bezonas JavaScript por krei ilin. Vi tamen bezonos iom da kutimo JavaScript por ŝanĝi ilian videblecon. Ilia aspekto, vicigo kaj grandeco povas esti facile personecigitaj per niaj mirindaj utilaj klasoj.

Por alireblecoj, ĉiu ŝargilo ĉi tie inkluzivas role="status"kaj nestitan <span class="visually-hidden">Loading...</span>.

La animacia efiko de ĉi tiu komponanto dependas de la prefers-reduced-motionamaskomunikila demando. Vidu la sekcion pri reduktita moviĝo de nia dokumentaro pri alirebleco .

Lima ŝpinisto

Uzu la randajn ŝpinilojn por malpeza ŝarĝa indikilo.

html

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

Koloroj

La randa ŝpinilo uzas currentColorpor sia border-color, signifante ke vi povas personecigi la koloron per tekstkoloraj utilecoj . Vi povas uzi iun ajn el niaj tekstkoloraj iloj sur la norma ŝpinilo.

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>

Kial ne uzi border-colorutilecojn? Ĉiu limŝpinisto precizigas transparentlimon por almenaŭ unu flanko, do .border-{color}utilecoj superregus tion.

Kreskanta ŝpinisto

Se vi ne ŝatas randan ŝpinilon, ŝanĝu al la kreskiga ŝpinilo. Kvankam ĝi teknike ne turniĝas, ĝi plurfoje kreskas!

html

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

Denove, ĉi tiu ŝpinilo estas konstruita per currentColor, do vi povas facile ŝanĝi ĝian aspekton per tekstkoloraj utilecoj . Jen ĝi estas en blua, kune kun la subtenataj variantoj.

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>

Vicigo

Ŝpiniloj en Bootstrap estas konstruitaj per rems, currentColor, kaj display: inline-flex. Ĉi tio signifas, ke ili povas facile esti regrandigi, rekolorigi kaj rapide vicigitaj.

Marĝeno

Uzu marĝenajn utilecojn kiel .m-5por facila interspaco.

html

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

Lokigo

Uzu flexbox-servaĵojn , flosajn ilojn aŭ tekst -allinigajn ilojn por meti ŝpinilojn ĝuste kie vi bezonas ilin en ajna situacio.

Flex

html

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

Ŝargante...

html

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

Flosiloj

html

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

Teksto vicigi

html

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

Grandeco

Aldonu .spinner-border-smkaj .spinner-grow-smfari pli malgrandan ŝpinilon, kiu povas rapide esti uzata ene de aliaj komponantoj.

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>

Aŭ, uzu kutimajn CSS aŭ enliniajn stilojn por ŝanĝi la dimensiojn laŭbezone.

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>

Butonoj

Uzu ŝpinilojn ene de butonoj por indiki ke ago estas nuntempe prilaborata aŭ okazanta. Vi ankaŭ povas interŝanĝi la tekston el la ŝpinelemento kaj uzi butontekston laŭbezone.

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

Variabloj

Aldonita en v5.2.0

Kiel parto de la aliro de evoluantaj CSS-variabloj de Bootstrap, ŝpinistoj nun uzas lokajn CSS-variablojn sur .spinner-borderkaj .spinner-growpor plibonigita realtempa personigo. Valoroj por la CSS-variabloj estas fiksitaj per Sass, do ankaŭ Sass-adaptigo ankoraŭ estas subtenata.

Variabloj pri randŝpiniloj:

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

Kreskanta ŝpin-variabloj:

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

Por ambaŭ ŝpiniloj, malgrandaj ŝpinilaj modifklasoj estas uzataj por ĝisdatigi la valorojn de ĉi tiuj CSS-variabloj laŭbezone. Ekzemple, la .spinner-border-smklaso faras la jenon:

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

Sass-variabloj

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

Ŝlosilkadroj

Uzita por krei la CSS-animaciojn por niaj ŝpiniloj. Inkludita en scss/_spinners.scss.

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

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