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.

I luga o lenei itulau

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="visually-hidden">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.

html

<div class="spinner-border" role="status">
  <span class="visually-hidden">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.

html

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

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!

html

<div class="spinner-grow" role="status">
  <span class="visually-hidden">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.

html

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

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.

html

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">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

html

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

utaina...

html

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

Opeopea

html

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

Fa'asa'o tusitusiga

html

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">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.

html

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

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

html

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

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.

html

<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

<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

Fuafuaga

Fa'aopoopo i le v5.2.0

I le avea ai o se vaega o le faʻaogaina o suiga CSS a Bootstrap, o loʻo faʻaogaina nei e le au taʻavale le CSS faʻapitonuʻu i luga .spinner-borderma .spinner-growmo le faʻaleleia o le taimi moni aganuʻu. O tau mo le CSS fesuiaiga e faʻatulagaina e ala i le Sass, o lea o loʻo lagolagoina pea le Sass customization.

Fesuia'iga fa'ailo tuaoi:

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

Fa'atupula'ia suiga ole spinner:

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

Mo ta'amilosaga uma e lua, e fa'aogaina vasega laiti e fa'aleleia ai le va'aiga e fa'afou ai tau o nei fesuiaiga CSS pe a mana'omia. Mo se faʻataʻitaʻiga, e faia e le .spinner-border-smvasega mea nei:

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

Sass fesuiaiga

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

Fa'ailoga autu

Fa'aoga mo le fatuina o le CSS animations mo a tatou spinners. E aofia i totonu scss/_spinners.scss.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}