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.
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>
.
prefers-reduced-motion
consulta 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-color
heꞌ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>
border-color
servicio público? Káda spinner frontera rehegua ohechauka peteĩ
transparent
frontera 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 rem
s, 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-5
espaciado 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>
<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-sm
ha .spinner-grow-sm
ojejapo 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;
}
}