in English

Tagata milo

Fa'ailoa le tulaga o le utaina o se vaega po'o se itulau ma Bootstrap spinners, fausia atoa i HTML, CSS, ma leai se JavaScript.

E uiga i

Bootstrap "spinners" e mafai ona faʻaogaina e faʻaalia ai le tulaga o le utaina i au galuega. E na'o le HTML ma le CSS e fausia, o lona uiga e te le mana'omia so'o se Javascript e fai ai. Ae ui i lea, e te manaʻomia se JavaScript masani e sui ai lo latou vaʻaia. O latou foliga vaaia, fa'aogaina, ma le lapopo'a e mafai ona faigofie ona fa'avasegaina ma a tatou vasega aoga fa'apitoa.

Mo fa'amoemoega avanoa, o uta ta'itasi iinei e aofia ai role="status"ma se fa'aputuga <span class="sr-only">Loading...</span>.

O le aafiaga o le animation o lenei vaega e fa'alagolago i le su'esu'ega a le prefers-reduced-motionaufaasālalau. Va'ai le vaega fa'aitiitiga fa'aitiitiga oa matou pepa fa'aoga avanoa .

Fa'ailo tuaoi

Fa'aoga mea fa'ata'oto mo le fa'ailoga mama o uta.

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

Lanu

O lo'o fa'aogaina e le fa'avili tuaoi currentColormo lona border-color, o lona uiga e mafai ona e fa'avasegaina le lanu ma mea fa'aoga lanu o tusitusiga . E mafai ona e fa'aogaina so'o se tasi o a matou mea e fa'aoga ai lanu o tusitusiga i luga o le fa'ata'amilosaga masani.

<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="sr-only">Loading...</span>
</div>
Aisea e le faʻaaogaina ai border-colormea aoga? E fa'amanino e ta'amilosaga ta'itasi se transparenttuaoi mo le itiiti ifo ma le tasi le itu, ina ia .border-{color}fa'aogaina e mea aoga lena mea.

Fa'ato'a tuputupu a'e

Afai e te le mana'o i se mea faataavili tuaoi, fesuia'i i le mea fa'aola. E ui e le milo fa'apitoa, ae fa'atupu pea!

<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

Toe tasi, o lenei spinner ua fausia i le currentColor, o lea e faigofie ai ona e suia ona foliga i le faaaogaina o lanu o tusitusiga . O iinei o loʻo i le lanumoana, faʻatasi ai ma suiga lagolago.

<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="sr-only">Loading...</span>
</div>

Fa'atonuga

Spinners i Bootstrap e fausia i remle s, currentColor, ma le display: inline-flex. O lona uiga e faigofie ona toe fa'afua, toe valivali, ma vave fa'aoga.

Avanoa

Fa'aaoga mea fa'aoga pito e pei .m-5o le fa'afaigofieina o avanoa.

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

Tulaga

Fa'aoga flexbox utilities , float utilities , po'o text alignment utilities e tuu ai spinners i le mea tonu e te mana'omia ai i soo se tulaga.

Fa'afoliga

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>
utaina... 
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>

Opeopea

<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

Fa'asa'o tusitusiga

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

Tele

Fa'aopoopo .spinner-border-smma .spinner-grow-smfai se la'ititi la'ititi e mafai ona fa'aoga vave i totonu o isi vaega.

<div class="spinner-border spinner-border-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>

Po'o, fa'aoga CSS masani po'o sitaili inline e sui ai fua pe a mana'omia.

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>

Fa'amau

Fa'aoga vili i totonu o fa'amau e fa'ailoa ai se gaioiga o lo'o fa'agasolo pe fa'atino. E mafai fo'i ona e fesuia'i le tusitusiga mai le elemene spinner ma fa'aoga fa'amau fa'amau pe a mana'omia.

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="sr-only">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="sr-only">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>