Masu juyawa
Nuna yanayin ɗorawa na wani bangare ko shafi tare da na'urorin Bootstrap, waɗanda aka gina gaba ɗaya tare da HTML, CSS, kuma babu JavaScript.
Game da
Ana iya amfani da Bootstrap “spinners” don nuna yanayin lodi a cikin ayyukanku. An gina su da HTML da CSS kawai, ma'ana ba kwa buƙatar kowane JavaScript don ƙirƙirar su. Za ku, duk da haka, kuna buƙatar wasu JavaScript na al'ada don kunna ganuwansu. Siffar su, jeri, da girman su ana iya keɓance su cikin sauƙi tare da azuzuwan abubuwan amfaninmu masu ban mamaki.
Don dalilai masu isa, kowane mai ɗaukar kaya a nan ya haɗa role="status"
da gida <span class="visually-hidden">Loading...</span>
.
prefers-reduced-motion
tambayar kafofin watsa labarai. Dubi
raguwar sashin motsi na takaddun damar mu .
Kadin kan iyaka
Yi amfani da madaidaicin madaurin kan iyakoki don alamar lodi mai nauyi.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Launuka
Ƙwararren kan iyaka yana amfani currentColor
da shi border-color
, ma'ana za ku iya keɓance launi tare da kayan aikin launi na rubutu . Kuna iya amfani da kowane kayan aikin launi na mu akan madaidaicin spinner.
<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
kayan aiki? Kowane mai jujjuya iyaka yana ƙayyadaddun
transparent
iyaka don aƙalla gefe ɗaya, don haka
.border-{color}
abubuwan amfani zasu ƙetare hakan.
Girma spinner
Idan baku son sikirin kan iyaka, canza zuwa mai girma spinner. Duk da yake ba a fasaha ba, yana girma akai-akai!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Har yanzu, an gina wannan sikirin tare da currentColor
, don haka zaka iya canza kamannin sa cikin sauƙi tare da kayan aikin launi na rubutu . Anan yana cikin shuɗi, tare da bambance-bambancen tallafi.
<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>
Daidaitawa
An gina masu kaɗa a cikin Bootstrap tare da rem
s, currentColor
, da display: inline-flex
. Wannan yana nufin ana iya canza su cikin sauƙi, canza launinsu, da daidaita su cikin sauri.
Margin
Yi amfani da abubuwan amfani da gefe kamar .m-5
don sauƙin tazara.
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Wuri
Yi amfani da kayan aikin flexbox , abubuwan amfani da ruwa , ko kayan aikin daidaita rubutu don sanya spinners daidai inda kuke buƙatar su a kowane yanayi.
sassauƙa
<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>
Yawo
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Daidaitaccen rubutu
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Girman
Ƙara .spinner-border-sm
kuma .spinner-grow-sm
don yin ƙarami mai jujjuya wanda za a iya amfani da shi da sauri a cikin wasu abubuwan da aka gyara.
<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>
Ko, yi amfani da CSS na al'ada ko salon layi don canza girma kamar yadda ake buƙata.
<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>
Buttons
Yi amfani da maɓalli a cikin maɓalli don nuna wani aiki a halin yanzu ana sarrafawa ko gudana. Hakanan kuna iya musanya rubutu daga ɓangaren maɓalli kuma kuyi amfani da rubutun maɓalli kamar yadda ake buƙata.
<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
Masu canji
$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;
Firam ɗin maɓalli
An yi amfani da shi don ƙirƙirar raye-rayen CSS don masu juya mu. Kunshe a cikin scss/_spinners.scss
.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}