Spinners jedhaman
Haalata fe'iinsa qaama ykn fuula Bootstrap spinners waliin agarsiisi, guutummaatti HTML, CSS, fi JavaScript hin qabneen ijaarame.
Waa'ee
Bootstrap “spinners” haala fe’iinsaa pirojektoota kee keessatti agarsiisuuf fayyadamuun ni danda’ama. Isaanis HTML fi CSS qofaan ijaaramaniiru, jechuunis isaan uumuuf JavaScript tokkollee si hin barbaachisu. Haa ta'u malee, mul'achuu isaanii jijjiiruuf JaavaScript amala tokko tokko si barbaachisa. Bifti isaanii, walsimsiisuun, fi safara isaanii salphaatti kutaalee faayidaa ajaa'ibsiisaa keenyaan haala barbaadamuun jijjiiruun ni danda'ama.
Kaayyoo dhaqqabummaaf, tokkoon tokkoon fe'umsaa asitti role="status"
fi kan nested of keessaa qaba <span class="sr-only">Loading...</span>
.
prefers-reduced-motion
gaaffii miidiyaa irratti hundaa'a. Kutaa sochii hir'ate sanada dhaqqabummaa keenyaa ilaali
.
Daangaa kan naanna'u
Agarsiiftuu fe'iinsa salphaa ta'eef naannessitoota daangaa fayyadami.
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
Halluuwwan
Naanna'aan daangaa currentColor
isaaf fayyadama , jechuunis halluu faayidaa halluu barruutiinborder-color
dhuunfachuu dandeessa . Faayidaa halluu barruu keenya kamiyyuu kan ispiinarii istaandaardii irratti fayyadamuu dandeessa.
<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
faayidaa hin fayyadamne? transparent
Tokkoon tokkoon daangaa naanna'aa yoo xiqqaate gama tokkoof daangaa
ifteessa
, kanaafuu .border-{color}
fayyadamtoonni sana irra darbu.
Spinner guddachaa jiru
Yoo border spinner hin barbaanne ta'e gara grow spinner tti jijjiiri. Teeknikaan osoo hin naanna'in irra deddeebi'ee guddata!
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
Ammas, naanna'aan kun waliin ijaarameera currentColor
, kanaaf salphaatti bifa isaa faayidaalee halluu barruutiin jijjiiruu dandeessa . Kunoo bifa halluu diimaatiin, garaagarummaa deeggaraman waliin.
<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>
Hiriirsuu
Spinners Bootstrap keessatti rem
s, currentColor
, fi display: inline-flex
. Kana jechuun salphaatti guddina isaanii jijjiiruu, halluu irra deebi'uu, fi saffisaan walsimsiisuun ni danda'ama.
Andaara
Faayidaa margina akka .m-5
addaan fageenya salphaa ta'eef fayyadami.
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
Ramaddii
Faayidaa flexbox , faayilii lola'aa , ykn faayidaa qindeessaa barruu fayyadamii haala kamiyyuu keessatti sirriitti bakka barbaaddutti ispiinaroota kaa'uuf.
Daddabuu
<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>
Yaa'a
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Barruu qindeessuu
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
Hamma ga'u
Itti dabaluu .spinner-border-sm
fi .spinner-grow-sm
spinner xiqqaa qaamolee biroo keessaa dafee fayyadamuu danda'u hojjechuuf.
<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>
Yookiin, akka barbaachisummaa isaatti dimenshinii jijjiiruuf CSS amala ykn akkaataa sarara keessaa fayyadami.
<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>
Qabduulee
Tarkaanfiin yeroo ammaa adeemsifamaa jiru ykn raawwatamaa akka jiru agarsiisuuf qaree keessaa ispiinaroota fayyadami. Akkasumas barruu qaama naanna'aa keessaa jijjiiruu fi barruu qaree akka barbaachisummaa isaatti fayyadamuu dandeessa.
<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>