Spinners jedhaman

Haalata fe'iinsa qaama ykn fuula Bootstrap spinners waliin agarsiisi, guutummaatti HTML, CSS, fi JavaScript hin qabneen ijaarame.

Fuula kana irratti

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="visually-hidden">Loading...</span>.

Bu'aan sochii qaama kanaa prefers-reduced-motiongaaffii 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="visually-hidden">Loading...</span>
</div>

Halluuwwan

Naanna'aan daangaa currentColorisaaf 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="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>

Maaliif border-colorfaayidaa hin fayyadamne? transparentTokkoon 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="visually-hidden">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="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>

Hiriirsuu

Spinners Bootstrap keessatti rems, 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-5addaan fageenya salphaa ta'eef fayyadami.

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

Ramaddii

Faayidaa flexbox , faayilii lola'aa , ykn faayidaa qindaa'ina 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="visually-hidden">Loading...</span>
  </div>
</div>

Fe'amaa jira...

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

Yaa'a

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Barruu qindeessuu

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Hamma ga'u

Itti dabaluu .spinner-border-smfi .spinner-grow-smspinner xiqqaa qaamolee biroo keessaa dafee fayyadamuu danda'u hojjechuuf.

<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>

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="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">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="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 jedhama

Jijjiiramoota

$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;

Furtuuwwan furtuuwwan

Sochii CSS kan ispiinaroota keenyaaf uumuuf fayyadama. keessatti hammatame scss/_spinners.scss.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}