Hiladores

Huk componente utaq p'anqap Bootstrap spinners kaqwan karga estadota rikuchiy, tukuy HTML kaqwan, CSS kaqwan chaymanta mana JavaScript kaqwan ruwasqa.

Kay p'anqapi

Sobre

Bootstrap “spinners” llamk’achiy atikunki rikuchinaykipaq carga estadota proyectoykikunapi. HTML chaymanta CSS kaqlla ruwasqa kanku, niyta munan mana ima JavaScripttapas necesitankichu chayta ruwanaykipaq. Ichaqa, wakin ruwasqa JavaScript necesitanki rikuyninkuta tikranaykipaq. Rikchayninku, chiqanchayninku, chanta sayayninninku ima mana sasachu ruwasqa kanman musphay utilidad claseykuwan.

Yaykunapaq, sapa kargaq kaypi role="status"chaymanta huk anidado <span class="visually-hidden">Loading...</span>.

Kay componentepa animación efectonqa prefers-reduced-motionmedios tapuymanta hapirin. Yaykuna qillqaykumanta pisiyachisqa kuyuy t'aqapi qhaway .

Frontera hiladora

Llampu carga rikuchiqpaq border spinners nisqawan llamk'achiy.

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

Colores

Frontera spinner currentColorpaypaq llamk'achin , niyta munan qillqa llimp'i yanapakuykunawanborder-color llimp'ita ruwayta atikunki . Mayqin qillqa llimp'i yanapakuyniykutapas hilador estándar kaqpi llamk'achiy atikunki.

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

¿Imanasqataq mana border-colorservicios públicos nisqakunata servichikunkichu? Sapa frontera spinner huk transparentfrontera huk ladollapaqpas willan, chayrayku .border-{color}utilidadkuna chayta llallichinman.

Wiñaq hilador

Sichus mana huk frontera hiladorta munankichu, wiñachiy hiladorman tikray. Manaña técnicamente muyunchu chaypas, sapa kutinmi wiñan!

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

Huk kuti, kay hilador ruwasqa kachkan currentColor, chayrayku mana sasachakuspalla rikchayninta tikrayta atikunki qillqa llimp'i yanapakuykunawan . Kaypiqa azulwanmi kachkan, chaynallataqmi yanapasqa variantekunawanpas.

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

Alineación

Bootstrap nisqapi hiladoras nisqakunaqa rems, currentColor, chaymanta display: inline-flex. Kayqa niyta munan, chaykunataqa mana sasachakuspalla sayayninta tikrayta atikunman, musuqmanta llimp’iyta atikunman, chaymanta usqhayllata chiqanchayta atikunman.

Pata

Utilizar utilidades de margen como .m-5para espaciamiento fácil.

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

Colocación

Flexbox yanapakuykunata , float yanapakuykunata , utaq qillqa chiqanchay yanapakuykunata llamk'achiy, mayqin situacionpipas necesitasqaykipi spinnerkunata churanaykipaq.

Flexible

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

Cargando...

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

Flotadores

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

Qillqasqa chiqanchay

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

Sayay

Yapay .spinner-border-smchaymanta .spinner-grow-smaswan huch’uy hiladora ruwanapaq, chayta usqhaylla huk componentes ukhupi llamk’achiy atikunman.

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

Utaq, sapanchasqa CSS utaq chiru ukhupi estilokuna llamk'achiy dimensiones nisqakunata necesitasqanmanhina tikranaykipaq.

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

Botones

Botonkuna ukhupi hiladorakunata llamk'achiy huk ruway kunan ruwakuchkaqta utaq ruwakuchkaqta rikuchinaykipaq. Hinallataq, qillqata elemento spinner kaqmanta t'inkinakuyta atinki chaymanta necesitasqaykimanhina botón qillqata llamk'achiy atikunki.

<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

Variables nisqakuna

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

Marcos clave

CSS animacionkunata ruwanapaq llamk'achisqa, spinnerniykupaq. Incluido 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;
  }
}