Spinners
Asehoy ny toetran'ny famenoana singa na pejy misy spinner Bootstrap, namboarina tanteraka tamin'ny HTML, CSS, ary tsy misy JavaScript.
About
Bootstrap "spinners" dia azo ampiasaina hanehoana ny toetry ny entana ao amin'ny tetikasanao. Namboarina tamin'ny HTML sy CSS ihany izy ireo, midika izany fa tsy mila JavaScript ianao hamoronana azy ireo. Na izany aza, mila JavaScript manokana ianao mba hampihodina ny fahitana azy. Ny bika aman'endriny, ny fampifanarahana ary ny habeny dia azo amboarina mora foana miaraka amin'ireo kilasin'ny fitaovana mahagaga.
Ho an'ny tanjona azo idirana, ny loader tsirairay eto dia role="status"
misy <span class="sr-only">Loading...</span>
.
prefers-reduced-motion
fangatahan'ny haino aman-jery ny fiantraikan'ity singa ity. Jereo ny
fizarana mihetsika mihena amin'ny antontan-taratasinay momba ny fahafahana miditra .
Mpanodina sisintany
Ampiasao ny mpanelanelana sisintany ho famantarana fampidinana maivana.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
loko
Ny spinner sisintany dia mampiasa currentColor
azy border-color
, midika izany fa azonao atao ny mampifanaraka ny loko amin'ny fampiasana loko lahatsoratra . Azonao atao ny mampiasa ny iray amin'ireo fitaovana miloko lahatsoratra amin'ny spinner mahazatra.
<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>
border-color
fitaovana? Ny spinner sisintany tsirairay dia mamaritra
transparent
sisintany ho an'ny lafiny iray farafaharatsiny, noho izany
.border-{color}
dia hosoloin'ny fitaovana izany.
Spinner mitombo
Raha tsy tianao ny spinner sisintany dia midira amin'ny spinner mitombo. Na dia tsy mihodikodina ara-teknika aza izy dia mitombo hatrany!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Indray mandeha indray, ity spinner ity dia namboarina miaraka amin'ny currentColor
, ka azonao atao ny manova mora foana ny endriny amin'ny fitaovana miloko lahatsoratra . Ity dia miloko manga, miaraka amin'ireo variana tohanana.
<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>
Fanitsiana
Ny spinners ao amin'ny Bootstrap dia namboarina miaraka amin'ny rem
s, currentColor
, ary display: inline-flex
. Midika izany fa azo ovaina mora foana izy ireo, averina loko ary arindra haingana.
sisiny
Mampiasà fitaovana margin ho .m-5
an'ny elanelana mora.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
fametrahana
Mampiasà fitaovana flexbox , fitaovana mitsingevana , na fitaovana fampifanarahana lahatsoratra mba hametrahana spinner amin'ny toerana ilanao azy amin'ny toe-javatra rehetra.
Flex
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
mitsingevana
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Ahitsio ny soratra
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Size
Ampio .spinner-border-sm
ary .spinner-grow-sm
manaova spinner kely kokoa izay azo ampiasaina haingana ao anatin'ny singa hafa.
<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>
Na, ampiasao CSS manokana na fomba inline hanovana ny refy araka izay ilaina.
<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>
bokotra
Mampiasà spinners ao anatin'ny bokotra hanondroana hetsika iray eo am-panaovana na mandeha amin'izao fotoana izao. Azonao atao ihany koa ny manova ny lahatsoratra amin'ny singa spinner ary mampiasa bokotra bokotra raha ilaina.
<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>