Spinners
Adierazi osagai edo orri baten karga-egoera Bootstrap biragailuekin, HTML, CSS eta JavaScript-ekin guztiz eraikia.
Buruz
Bootstrap "spinners" erabil daiteke zure proiektuetan kargatzeko egoera erakusteko. HTML eta CSSrekin soilik eraiki dira, hau da, ez duzu JavaScript behar horiek sortzeko. Hala ere, JavaScript pertsonalizatu batzuk beharko dituzu haien ikusgarritasuna aldatzeko. Haien itxura, lerrokatzea eta tamaina erraz pertsonaliza daitezke gure erabilgarritasun klase harrigarriekin.
Irisgarritasun-helburuetarako, hemen kargatzaile bakoitzak role="status"
habiaratua eta <span class="visually-hidden">Loading...</span>
.
prefers-reduced-motion
multimedia kontsultaren menpe dago. Ikusi
gure irisgarritasun-dokumentazioaren mugimendu murriztuaren atala .
Mugako spinnera
Erabili ertz biragailuak karga-adierazle arin baterako.
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Koloreak
Ertz-spinner-ak bererako erabiltzen currentColor
du border-color
, hau da, kolorea pertsonaliza dezakezu testu-koloreen erabilgarritasunekin . Gure testu-kolorearen erabilgarritasunetako edozein erabil dezakezu spinner estandarrean.
<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
utilitateak? Ertz biratzaile bakoitzak ertz bat zehazten du
transparent
gutxienez alde baterako, beraz,
.border-{color}
utilitateek hori gainidatziko lukete.
Hazten ari den spinner
Ez baduzu gustuko ertz-girogailurik, aldatu hazteko spinnerra. Teknikoki bira egiten ez duen arren, behin eta berriz hazten da!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Berriro ere, bira hau rekin eraikita dago currentColor
, beraz, itxura erraz alda dezakezu testu-kolorearen erabilgarritasunekin . Hemen urdinez dago, onartzen diren aldaerekin batera.
<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>
Lerrokatzea
Bootstrap-eko spinner- rem
ak s, currentColor
, eta display: inline-flex
. Horrek esan nahi du erraz aldatu, koloreztatu eta azkar lerrokatu daitezkeela.
Marjina
Erabili marjina-utilitateak tarte .m-5
errazak izateko.
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
Kokapen
Erabili flexbox utilitateak , float utilitateak edo testuak lerrokatzeko utilitateak edozein egoeratan behar dituzun tokian girak jartzeko.
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>
Karroza
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Testua lerrokatzea
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
Tamaina
Gehitu .spinner-border-sm
eta .spinner-grow-sm
beste osagai batzuetan azkar erabil daitekeen spinner txikiagoa egiteko.
<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>
Edo, erabili CSS pertsonalizatuak edo lerroko estiloak behar den neurriak aldatzeko.
<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>
Botoiak
Erabili biragailuak botoien barruan ekintza bat prozesatzen edo gauzatzen ari dela adierazteko. Testua biragailuaren elementutik kanpo trukatu eta botoiaren testua behar duzunean erabil dezakezu.
<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
Aldagaiak
$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;
Gako-fotogramak
Gure spinners CSS animazioak sortzeko erabiltzen da. -n sartuta scss/_spinners.scss
.
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}