in English

Egrijiler

Doly HTML, CSS bilen gurlan we JavaScript ýok Bootstrap pyrlaýjylary bilen bir komponentiň ýa-da sahypanyň ýükleniş ýagdaýyny görkeziň.

Bu sahypada

Takmynan

“Bootstrap” pyrlanýanlar, taslamalaryňyzdaky ýükleniş ýagdaýyny görkezmek üçin ulanylyp bilner. Diňe HTML we CSS bilen gurlan, olary döretmek üçin JavaScript gerek däl. Şeýle-de bolsa, görnükliligini üýtgetmek üçin size ýörite JavaScript gerek bolar. Olaryň daşky görnüşi, deňleşdirilmegi we ululygy ajaýyp peýdaly synplarymyz bilen aňsatlaşdyrylyp bilner.

Elýeterlilik maksady bilen, bu ýerdäki her bir ýükleýjini öz içine role="status"alýar <span class="visually-hidden">Loading...</span>.

Bu komponentiň animasiýa täsiri prefers-reduced-motionmedia talaplaryna baglydyr. Elýeterlilik resminamalarymyzyň azaldylan hereket bölümine serediň .

Serhet egiriji

Lighteňil ýük görkezijisi üçin serhet pyrlaýjylaryny ulanyň.

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

Reňkler

Serhet egriji currentColor, reňkini tekst reňk enjamlaryborder-color bilen sazlap bilersiňiz . Tekst reňk enjamlarymyzyň islendigini adaty egirijide ulanyp bilersiňiz.

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

Näme üçin border-colorkommunal hyzmatlary ulanmaly däl? Her serhet egiriji transparentiň bolmanda bir tarap üçin serhet kesgitleýär, şonuň üçin .border-{color}kommunal hyzmatlar muny ýok eder.

Ösýän egiriji

Serhet egirijisini göz öňüne getirmeýän bolsaňyz, ösýän egirijä geçiň. Tehniki taýdan aýlanmasa-da, birnäçe gezek ösýär!

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

Bu pyrlaýjy ýene bir gezek gurlupdyr , şonuň üçin daşky görnüşini tekst reňk enjamlarycurrentColor bilen aňsatlyk bilen üýtgedip bilersiňiz . Bu ýerde goldanýan görnüşler bilen birlikde gök reňkde bolýar.

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

Deňleşdirmek

Bootstrap-da egirýänler rems currentColorwe display: inline-flex. Bu olaryň aňsatlyk bilen ölçegini üýtgedip, reňkläp we çalt deňleşdirip boljakdygyny aňladýar.

Margin

Easyeňil aralyk ýaly margin hyzmatlaryny ulanyň ..m-5

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

Acementerleşiş

Islendik ýagdaýda pyrlaýjylary gerek ýerinde ýerleşdirmek üçin flexbox kömekçi enjamlaryny , ýüzýän kömekçi enjamlary ýa-da tekst deňleşdiriş enjamlaryny ulanyň .

Flex

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

Adingüklenýär ...

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

Atsüzüjiler

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

Tekst tekizlemek

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

Ölçegi

Beýleki komponentleriň içinde çalt ulanyp boljak has kiçi egiriji goşuň .spinner-border-smwe ýasaýyň..spinner-grow-sm

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

Ora-da zerurlyklara görä ölçegleri üýtgetmek üçin ýörite CSS ýa-da içerki stilleri ulanyň.

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

Düwmeler

Häzirki wagtda bir işiň ýa-da bolup geçýändigini görkezmek üçin düwmeleriň içindäki pyrlaýjylary ulanyň. Şeýle hem, teksti egiriji elementden çalşyp, düwmäniň tekstini zerur bolanda ulanyp bilersiňiz.

<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

Üýtgeýjiler

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

Düwmeler

Öndürijilerimiz üçin CSS animasiýalaryny döretmek üçin ulanylýar. Goşulýar scss/_spinners.scss.

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

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