Hiladores rehegua

Ohechauka mbaꞌeichaitépa ojekarga peteĩ componente térã página umi spinner Bootstrap reheve, oñemopuꞌapaite HTML, CSS ha JavaScript reheve.

Ko páhinape

Upéva rehegua

Bootstrap “spinners” ikatu ojepuru ohechauka hag̃ua mbaꞌeichaitépa ojekarga ne proyecto-kuérape. Oñemopu’ã HTML ha CSS rupive añoite, he’iséva natekotevẽiha mba’eveichagua JavaScript emoheñói hag̃ua. Ha katu, reikotevẽta peteĩ JavaScript jeporupyre emoambue hag̃ua ijehecharã. Ijehecha, alineación ha tamaño ikatu ojepersonaliza fácilmente ore clase de utilidad asombrosa reheve.

Ojeike hag̃ua, peteĩteĩva kargador ko’ápe oike role="status"ha peteĩ anidado <span class="visually-hidden">Loading...</span>.

Pe efecto animación rehegua ko componente rehegua odepende pe prefers-reduced-motionconsulta medio rehegua rehe. Ehecha pe sección movimiento reducido ore kuatia accesibilidad rehegua .

Hilador de frontera rehegua

Eipuru umi hilador frontera rehegua peteĩ indicador de carga ligero-pe g̃uarã.

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

Umi sa’ykuéra

Pe border spinner oipuru imbaꞌerã currentColor, border-colorheꞌiséva ikatuha emohenda saꞌi umi utilidad jehaipyre saꞌi rehegua ndive . Ikatu reipuru oimeraẽva ore utilidad jehaipyre color rehegua pe hilador estándar-pe.

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

Mba’ére piko ndojeporúi umi border-colorservicio público? Káda spinner frontera rehegua ohechauka peteĩ transparentfrontera peteĩ lado jepe, upévare .border-{color}umi utilidad omboykéta upéva.

Hilador okakuaáva

Ndereipotáiramo peteĩ hilador de frontera, eñemoambue pe hilador de crecimiento-pe. ¡Ndaha’éiramo jepe técnicamente ojere, ¡okakuaa jey jey!

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

Peteĩ jey, ko hilarador oñemopu’ã currentColor, ikatu hag̃uáicha remoambue pya’e hesa umi utilidad jehaipyre sa’y rehegua rupive . Ko'ápe oime hovy, umi variante oipytyvõva ndive.

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

Umi hilador Bootstrap-pegua oñemopuꞌa rems, currentColor, ha display: inline-flex. Péva he’ise ikatuha oñemoambue pya’e, oñembosa’y jey ha pya’e oñembojoaju.

Pa'ũnandi

Eipuru umi utilidad margen rehegua ha’eháicha .m-5espaciado ndahasýivape g̃uarã.

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

Oñemohenda haguã

Eipuru flexbox utilidad , float utilidad , térã utilidad texto alineación rehegua emoĩ hag̃ua umi hilador exactamente reikotevẽhápe oimeraẽ situación-pe.

Pyso

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

Ojekarga jave...

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

Oveve

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

Ñe’ẽryru ñemohenda

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

Tuichakue

Oñemoí .spinner-border-smha .spinner-grow-smojejapo hagua petet hilador michtvéva ikatúva ojepuru pya e ambue componente ryepýpe.

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

Térã, eipuru CSS térã estilo inline jeporupyre emoambue hag̃ua umi dimensión oñeikotevẽháicha.

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

Umi botón rehegua

Eipuru umi hilador umi botón ryepýpe ehechauka hag̃ua peteĩ tembiapo oñemboguata térã oikoha koꞌág̃a. Ikatu avei embohasa jehaipyre elemento spinner-gui ha eipuru jehaipyre botón rehegua tekotevẽháicha.

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

Variables rehegua

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

Umi cuadro clave rehegua

Ojepuru ojejapo hag̃ua CSS taꞌãngamýi ñande spinner-kuérape g̃uarã. Oike ipype scss/_spinners.scss.

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

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