Spinners

Onyesha hali ya upakiaji wa kijenzi au ukurasa na vipicha vya Bootstrap, vilivyojengwa kwa HTML, CSS, na hakuna JavaScript.

Katika ukurasa huu

Kuhusu

Bootstrap "spinners" inaweza kutumika kuonyesha hali ya upakiaji katika miradi yako. Zimeundwa kwa HTML na CSS pekee, kumaanisha kuwa hauitaji JavaScript yoyote ili kuziunda. Hata hivyo, utahitaji JavaScript maalum ili kubadilisha mwonekano wao. Muonekano wao, mpangilio na ukubwa wao unaweza kubinafsishwa kwa urahisi na madarasa yetu ya ajabu ya matumizi.

Kwa madhumuni ya ufikivu, kila kipakiaji hapa kinajumuisha role="status"na nested <span class="visually-hidden">Loading...</span>.

Athari ya uhuishaji ya kipengele hiki inategemea prefers-reduced-motionhoja ya midia. Tazama sehemu ya mwendo iliyopunguzwa ya hati zetu za ufikivu .

Mzunguko wa mpaka

Tumia spinners za mpaka kwa kiashiria cha upakiaji chepesi.

html

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

Rangi

Spinner ya mpaka hutumia currentColorkwa ajili yake border-color, kumaanisha kuwa unaweza kubinafsisha rangi na huduma za rangi ya maandishi . Unaweza kutumia huduma zetu zozote za rangi ya maandishi kwenye spinner ya kawaida.

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>

Kwa nini usitumie border-colorhuduma? Kila spinner ya mpaka inabainisha transparentmpaka kwa angalau upande mmoja, kwa hivyo .border-{color}huduma zinaweza kubatilisha hilo.

Kukua spinner

Ikiwa hupendi spinner ya mpaka, badilisha hadi kukua spinner. Ingawa haizunguki kitaalam, hukua mara kwa mara!

html

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

Kwa mara nyingine tena, spinner hii imejengwa na currentColor, kwa hivyo unaweza kubadilisha mwonekano wake kwa urahisi na huduma za rangi ya maandishi . Hapa ni katika bluu, pamoja na vibadala vinavyotumika.

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>

Mpangilio

Spinners katika Bootstrap hujengwa na rems, currentColor, na display: inline-flex. Hii inamaanisha kuwa zinaweza kubadilishwa ukubwa, kupakwa rangi upya na kupangiliwa haraka.

Pembezoni

Tumia huduma za ukingo kama .m-5kwa nafasi rahisi.

html

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

Uwekaji

Tumia huduma za flexbox , huduma za kuelea , au huduma za upatanishaji wa maandishi ili kuweka spinners mahali unapozihitaji katika hali yoyote.

Flex

html

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

Inapakia...

html

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

Inaelea

html

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

Pangilia maandishi

html

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

Ukubwa

Ongeza .spinner-border-smna .spinner-grow-smkutengeneza spinner ndogo ambayo inaweza kutumika kwa haraka ndani ya vipengele vingine.

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>

Au, tumia CSS maalum au mitindo ya ndani ili kubadilisha vipimo inavyohitajika.

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>

Vifungo

Tumia spinner ndani ya vitufe ili kuashiria kuwa kitendo kinachakatwa au kinafanyika kwa sasa. Unaweza pia kubadilisha maandishi kutoka kwa kipengee cha spinner na utumie maandishi ya kitufe kama inahitajika.

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

Vigezo

Imeongezwa katika v5.2.0

Kama sehemu ya mbinu ya mabadiliko ya vigeu vya CSS ya Bootstrap, spinners sasa hutumia vigeu vya CSS vya ndani .spinner-borderna .spinner-growkwa uboreshaji wa ubinafsishaji wa wakati halisi. Thamani za anuwai za CSS zimewekwa kupitia Sass, kwa hivyo ubinafsishaji wa Sass bado unatumika, pia.

Vigezo vya spinner za mpaka:

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

Vigezo vya ukuaji wa spinner:

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

Kwa spinner zote mbili, madarasa madogo ya kurekebisha spinner hutumiwa kusasisha thamani za vigezo hivi vya CSS inapohitajika. Kwa mfano, .spinner-border-smdarasa hufanya yafuatayo:

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

Vigezo vya Sass

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

Fremu muhimu

Inatumika kuunda uhuishaji wa CSS kwa wazungukaji wetu. Imejumuishwa katika scss/_spinners.scss.

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

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