in English

Spinners

Onyesha hali ya upakiaji wa kijenzi au ukurasa na vipicha vya Bootstrap, vilivyojengwa kabisa 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.

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

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

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

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

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

Uwekaji

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

Flex

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

Inapakia...

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

Inaelea

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

Pangilia maandishi

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

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

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

<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

Vigezo

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