Ma spinner
Onetsani momwe gawo kapena tsamba limakwezera ma spinner a Bootstrap, omangidwa kwathunthu ndi HTML, CSS, ndipo palibe JavaScript.
Za
Bootstrap "spinners" atha kugwiritsidwa ntchito kuwonetsa momwe mukukweza mumapulojekiti anu. Amamangidwa ndi HTML ndi CSS okha, kutanthauza kuti simufunika JavaScript kuti mupange. Mudzafunika JavaScript yachizolowezi kuti musinthe mawonekedwe awo. Maonekedwe awo, kamvekedwe, ndi kukula kwake zitha kusinthidwa mosavuta ndi makalasi athu odabwitsa.
Zolinga zofikika, chojambulira chilichonse apa chikuphatikiza role="status"
ndi nested <span class="visually-hidden">Loading...</span>
.
prefers-reduced-motion
funso la media. Onani gawo
lochepetsedwa la zolemba zathu zofikira .
Border spinner
Gwiritsani ntchito ma spinner amalire kuti mukhale chizindikiro chotsitsa chopepuka.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Mitundu
Border spinner imagwiritsa currentColor
ntchito zake border-color
, kutanthauza kuti mutha kusintha mtunduwo ndi zida zamitundu yamalemba . Mutha kugwiritsa ntchito chilichonse mwazinthu zathu zamtundu wamtundu pa spinner wamba.
<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
zofunikira? Iliyonse yamalire spinner imatchula
transparent
malire a mbali imodzi, kotero
.border-{color}
zothandizira zitha kupitilira pamenepo.
Kukula kwa spinner
Ngati simukonda spinner ya malire, sinthani ku kukula kwa spinner. Ngakhale sichizungulira mwaukadaulo, imakula mobwerezabwereza!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Apanso, spinner iyi imapangidwa ndi currentColor
, kotero mutha kusintha mawonekedwe ake mosavuta ndi zida zamitundu yamalemba . Apa ili mu buluu, pamodzi ndi mitundu yothandizidwa.
<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>
Kuyanjanitsa
Spinners mu Bootstrap amamangidwa ndi rem
s, currentColor
, ndi display: inline-flex
. Izi zikutanthauza kuti akhoza kusinthidwanso mosavuta, kusinthidwanso, ndikuyanjanitsidwa mwachangu.
Mphepete mwa nyanja
Gwiritsani ntchito zida zam'mphepete ngati .m-5
kuti muzikhala momasuka.
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Kuyika
Gwiritsani ntchito zida za flexbox , zoyandama , kapena zolumikizira mawu kuti muyike ma spinner pomwe mukuwafuna nthawi iliyonse.
Flex
<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>
Zoyandama
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Gwirizanitsani mawu
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Kukula
Onjezani .spinner-border-sm
ndikupanga .spinner-grow-sm
spinner yaying'ono yomwe ingagwiritsidwe ntchito mwachangu mkati mwa zigawo zina.
<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>
Kapena, gwiritsani ntchito CSS kapena masitayelo apaintaneti kuti musinthe makulidwe ngati pakufunika.
<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>
Mabatani
Gwiritsani ntchito ma spinner mkati mwa mabatani kuti muwonetse zomwe zikuchitika kapena zikuchitika. Mutha kusinthanso mawuwo kuchokera pa spinner ndikugwiritsa ntchito batani ngati pakufunika.
<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
Zosintha
$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;
Mafelemu ofunika
Amagwiritsidwa ntchito popanga makanema ojambula a CSS kwa ma spinner athu. Kuphatikizidwa mu scss/_spinners.scss
.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}