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.

A wannan shafi

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

Tasirin raye-rayen wannan bangaren ya dogara ne da prefers-reduced-motiontambayar 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 currentColorda 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>

Me yasa ba'a amfani da border-colorkayan aiki? Kowane mai jujjuya iyaka yana ƙayyadaddun transparentiyaka 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 rems, 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-5don 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>

Ana lodawa...

<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-smkuma .spinner-grow-smdon 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;
  }
}