Bato oyo basalaka spinner
Lakisa état ya chargement ya composant to page na ba spinners ya Bootstrap, etongami mobimba na HTML, CSS, mpe JavaScript te.
Pene
Bootstrap “spinners” ekoki kosalelama mpo na kolakisa état ya chargement na ba projets na yo. Batongami kaka na HTML mpe CSS, elingi koloba ete ozali na mposa ya JavaScript moko te mpo na kosala yango. Nzokande, okozala na mposa ya mwa JavaScript oyo obongisi mpo na kobongola ndenge oyo emonanaka. Emonani, alignment, mpe taille na bango ekoki kozala facilement personnalisé na ba classes na biso ya utilité ya kokamwa.
Mpo na ntina ya bozwi, chargeur moko na moko awa ezali role="status"
na mpe a nested <span class="visually-hidden">Loading...</span>
.
prefers-reduced-motion
requête ya média. Tala
eteni ya mouvement réduit ya mikanda na biso ya accessibilité .
Moto oyo azali kobalusa ndelo
Salelá ba spinners ya ndelo mpo na elembo ya chargement ya pɛpɛlɛ.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Balangi
Spinner ya ndelo esalela currentColor
mpo na yango border-color
, elingi koloba okoki ko personnaliser couleur na ba utilitaires ya couleur ya texte . Okoki kosalela moko ya ba utilitaires na biso ya couleur ya texte na spinner standard.
<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
ba utilités? Moto na moto oyo azali kobalusa ndelo azali kolakisa
transparent
ndelo mpo na ata ngambo moko, yango wana
.border-{color}
ba utilitaires ekolongola yango.
Kokola ya spinner
Soki ozali na fancy ya border spinner te, changer na grow spinner. Atako na ndenge ya tekiniki ebalukaka te, ekolaka mbala na mbala!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Encore une fois, spinner oyo etongami na currentColor
, mpo okoka ko changer facilement apparence na yango na ba utilitaires ya couleur ya texte . Awa ezali na bleu, elongo na ba variantes oyo esungami.
<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>
Kobongisa makambo
Ba spinners na Bootstrap etongami na rem
s, currentColor
, mpe display: inline-flex
. Yango elingi koloba ete bakoki kobongola bonene na yango kozanga mpasi, kozongisa langi na yango, mpe kotya yango nokinoki na molɔngɔ.
Marge
Salelá ba utilitaires ya marge lokola .m-5
mpo na espacement facile.
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Botiami na esika
Salelá ba utilitaires flexbox , ba utilitaires ya flotteur , to ba utilitaires ya alignment ya makomi mpo na kotya ba spinners exactement esika oyo osengeli na yango na situation nyonso.
Ya pete
<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>
Ezali kopumbwapumbwa
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Bobongisi makomi
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Bonene
Bakisa .spinner-border-sm
mpe .spinner-grow-sm
mpo na kosala eloko ya moke oyo ekoki kosalelama nokinoki na kati ya biloko mosusu.
<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>
To, salelá ba styles ya CSS to ya inline personnalisé mpo na kobongola ba dimensions soki esengeli.
<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>
Ba boutons
Salelá ba spinners na kati ya ba boutons mpo na kolakisa ete likambo moko ezali kosalama to ezali kosalema sikoyo. Okoki mpe ko swap texte libanda ya élément spinner mpe kosalela texte ya bouton soki esengeli.
<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 oyo azali
Ba variables oyo ezali
$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;
Ba cadres clés
Esalemi mpo na kosala ba animations ya CSS mpo na ba spinners na biso. Ezali na kati ya scss/_spinners.scss
.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}