in English

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.

html nisqapi

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

html nisqapi

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

html nisqapi

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

html nisqapi

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

html nisqapi

<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

html nisqapi

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

Cargando...

html nisqapi

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

Flotadores

html nisqapi

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

Qillqasqa chiqanchay

html nisqapi

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

html nisqapi

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

html nisqapi

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

html nisqapi

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

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

Variables nisqakuna

v5.2.0 nisqapi yapasqa

Bootstrap kaqpa wiñaq CSS tikraqkuna asuykuyninmanta huknin hina, spinners kunan llaqta CSS tikraqkunata llamk'achinku .spinner-borderchaymanta .spinner-growaswan allin chiqa pacha ruwanapaq. CSS tikraqkunapaq chanikuna Sass kaqnintakama churasqa, chayrayku Sass ruwanakuna yanapasqaraq kachkan, chaymanta.

Frontera spinner variables nisqakuna:

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

Wiñaq hilador variables nisqakuna:

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

Iskaynin spinners kaqpaq, uchuy spinner modificador clasekuna llamk'achkanku kay CSS tikraqpa chanikunata musuqyachinapaq necesitasqanmanhina. Ejemplopaq, chay .spinner-border-smclaseqa kaykunatan ruwan:

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

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