Spinners
Rewşa barkirinê ya pêkhateyek an rûpelek bi spinnerên Bootstrap, ku bi tevahî bi HTML, CSS, û bê JavaScript hatî çêkirin, destnîşan bikin.
Ji dor
Bootstrap "spinners" dikarin werin bikar anîn da ku di projeyên we de rewşa barkirinê nîşan bidin. Ew tenê bi HTML û CSS-ê têne çêkirin, tê vê wateyê ku hûn hewce ne JavaScript-ê ne ku wan biafirînin. Lêbelê, hûn ê hewceyê hin JavaScript-a xwerû bikin ku dîtina wan biguhezînin. Xuyabûn, lihevkirin û mezinbûna wan bi dersên meyên karûbar ên ecêb bi hêsanî têne xweş kirin.
Ji bo mebestên gihîştinê, her barkerek li vir tê de role="status"
û hêlînek <span class="visually-hidden">Loading...</span>
heye.
prefers-reduced-motion
medyayê ve girêdayî ye. Binêre
beşa tevgera kêmkirî ya belgeya gihîştina me .
Sînor spinner
Ji bo nîşanek barkirinê ya sivik, spinnerên sînor bikar bînin.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Colors
Sînor spinner ji currentColor
bo xwe bikar tîne border-color
, tê vê wateyê ku hûn dikarin reng bi karûbarên rengê nivîsê xweş bikin. Hûn dikarin li ser spinner-a standard yek ji karûbarên rengê nivîsara me bikar bînin.
<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
karûbar bikar neynin? Her spinner
transparent
sînorek ji bo kêmanî yek alî sînorek diyar dike, ji ber vê yekê
.border-{color}
karûbar dê vê yekê derbas bikin.
Spinner mezin dibe
Heke hûn ji spinnerek sînor hez nakin, veguherînin spinner-a mezin. Dema ku ew ji hêla teknîkî ve nezivirîne, ew çend caran mezin dibe!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Carek din, ev spinner bi ve hatî çêkirin currentColor
, ji ber vê yekê hûn dikarin bi hêsanî xuyangê wê bi karûbarên rengê nivîsê biguhezînin . Li vir ew şîn e, digel guhertoyên piştgirî.
<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>
Alignment
Spinners di Bootstrap de bi rem
s, currentColor
, û têne çêkirin display: inline-flex
. Ev tê vê wateyê ku ew dikarin bi hêsanî mezinahî, ji nû ve werin reng kirin, û bi lez werin rêz kirin.
Margin
Karûbarên marjînal ên wekî .m-5
ji bo veqetandina hêsan bikar bînin .
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Cihkirin
Karûbarên flexbox , karûbarên float , an karûbarên hevrêzkirina nivîsê bikar bînin da ku spinneran tam li cîhê ku hûn di her rewşê de hewce ne bi cîh bikin.
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>
Floats
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Text align
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Mezinayî
Zêde bikin .spinner-border-sm
û .spinner-grow-sm
bikin ku spinnerek piçûktir çêbikin ku zû dikare di nav pêkhateyên din de were bikar anîn.
<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>
An jî, CSS-ya xwerû an şêwazên hundurîn bikar bînin da ku li gorî hewcedariyê pîvanan biguhezînin.
<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
Di nav bişkokan de spinneran bikar bînin da ku destnîşan bikin ku çalakiyek niha tête kirin an pêk tê. Her weha hûn dikarin nivîsê ji hêmana spinner biguhezînin û li gorî hewcedariyê nivîsa bişkojkê bikar bînin.
<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
Variables
$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;
Keyframes
Ji bo afirandina anîmasyonên CSS-ê ji bo spinnerên me têne bikar anîn. Di nav de scss/_spinners.scss
.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}