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

html

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

Reňkler

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

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>

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!

html

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

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>

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

html

<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

html

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

Adingüklenýär ...

html

<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

html

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

Tekst tekizlemek

html

<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

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>

Ora-da zerurlyklary ölçemek üçin ýörite CSS ýa-da içerki stilleri ulanyň.

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>

Düwmeler

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

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

Üýtgeýjiler

V5.2.0 goşuldy

“Bootstrap” -yň ösýän CSS üýtgeýjileriniň çemeleşmesiniň bir bölegi hökmünde, pyrlaýjylar häzirki wagtda ýerli CSS üýtgeýjilerini ulanýarlar .spinner-borderwe .spinner-growhakyky wagtda özleşdirmek üçin. CSS üýtgeýjileriniň bahalary Sass arkaly kesgitlenýär, şonuň üçin Sass sazlamasy henizem goldanýar.

Serhet aýlaýjy üýtgeýjiler:

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

Ösýän egiriji üýtgeýjiler:

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

Iki aýlawçy üçin bu CSS üýtgeýänleriň bahalaryny zerur bolanda täzelemek üçin kiçi egiriji modifikator synplary ulanylýar. Mysal üçin, .spinner-border-smsynp aşakdakylary edýär:

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

Sass üýtgeýjileri

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