in English

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

html rehegua

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

html rehegua

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

html rehegua

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

html rehegua

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

html rehegua

<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

html rehegua

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

Ojekarga jave...

html rehegua

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

Oveve

html rehegua

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

Ñe’ẽryru ñemohenda

html rehegua

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

html rehegua

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

html rehegua

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

html rehegua

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

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

Variables rehegua

Oñemoĩve v5.2.0-pe

Pehẽngue ramo Bootstrap CSS mbaꞌekuaarã oñembohapévape, umi spinner koꞌág̃a oipuru umi mbaꞌekuaarã CSS tetãygua rehegua .spinner-borderha .spinner-growoñembotuichave hag̃ua ñembohekopyrã tiempo real-pe. Umi mbaꞌekuaarã CSS mbaꞌekuaarãme g̃uarã oñemohenda Sass rupive, upévare oipytyvõ gueteri Sass jeporupyre, avei.

Umi variable spinner frontera rehegua: .

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

Umi variable hiladora okakuaáva: .

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

Mokõive spinner-pe g̃uarã, ojepuru umi clase modificador spinner michĩva oñembopyahu hag̃ua koꞌã CSS mbaꞌekuaarã valor oñeikotevẽháicha. Techapyrã, pe .spinner-border-smclase ojapo ko’ã mba’e:

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

Sass mba’ekuaarã

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