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="visually-hidden">Loading...</span>
.
prefers-reduced-motion
aufaasā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="visually-hidden">Loading...</span>
</div>
Lanu
O lo'o fa'aogaina e le fa'avili tuaoi currentColor
mo 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="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
mea aoga? E fa'amanino e ta'amilosaga ta'itasi se
transparent
tuaoi 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="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.
<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 rem
le 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-5
o le fa'afaigofieina o avanoa.
<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
<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>
Opeopea
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Fa'asa'o tusitusiga
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Tele
Fa'aopoopo .spinner-border-sm
ma .spinner-grow-sm
fai 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="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.
<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.
<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
Fuafuaga
$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;
}
}