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.

Na lokasa oyo

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

Effet ya animation ya composante oyo ezali dépendant na prefers-reduced-motionrequê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 esalelaka currentColormpo 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>

Mpo na nini te kosalela border-colorba utilités? Mobali moko na moko oyo azali kobalusa ndelo azali kolakisa transparentndelo 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 rems, 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-5mpo 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>

Ezali ko charger...

<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-smmpe .spinner-grow-smmpo 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 échanger 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;
  }
}