Iispinners

Bonisa imeko yokulayisha yecandelo okanye iphepha eline-Bootstrap spinners, eyakhelwe ngokupheleleyo ngeHTML, CSS, kwaye akukho JavaScript.

Kweli phepha

Malunga

I-Bootstrap "spinners" ingasetyenziselwa ukubonisa imeko yokulayisha kwiiprojekthi zakho. Zakhelwe kuphela nge-HTML kunye neCSS, okuthetha ukuba awudingi iJavaScript ukuyidala. Uyakufuna, nangona kunjalo, iJavaScript yesiko ukuguqula ukubonakala kwayo. Inkangeleko yabo, ulungelelwaniso, kunye nobungakanani bunokwenziwa ngokulula kunye neeklasi zethu eziluncedo ezimangalisayo.

Ngeenjongo zokufikeleleka, umlayishi ngamnye apha uquka role="status"kunye nendlwane <span class="visually-hidden">Loading...</span>.

Isiphumo soopopayi seli candelo sixhomekeke prefers-reduced-motionkumbuzo wemidiya. Jonga icandelo leentshukumo ezincitshisiweyo kuxwebhu lwethu lofikelelo .

I-Border spinner

Sebenzisa i-spinners yomda kwisalathisi esilula sokulayisha.

html

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

Imibala

Umda we spinner usetyenziselwa currentColorwona border-color, oku kuthetha ukuba ungenza ngokusesikweni umbala ngezinto eziluncedo zombala wokubhaliweyo . Ungasebenzisa nayiphi na into yethu yombala wokubhaliweyo kwi-spinner eqhelekileyo.

html

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

Kutheni ungasebenzisi border-colorizinto eziluncedo? Umda ngamnye wesipinari ukhankanya transparentumda ubuncinane wecala elinye, ngoko ke .border-{color}izinto eziluncedo ziya kugqitha oko.

Ukukhula kwe-spinner

Ukuba awunqweneli i-spinner yomda, tshintshela kwi-spinner yokukhula. Ngelixa ingajiki ngokobuchwephesha, iyakhula ngokuphindaphindiweyo!

html

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

Kwakhona, le spinner yakhiwe nge currentColor, ngoko ke unokutshintsha ngokulula inkangeleko yayo ngezixhobo zombala wokubhaliweyo . Nantsi iblue, kunye nezinto ezahlukeneyo ezixhaswayo.

html

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

Ulungelelwaniso

Iispinners eBootstrap zakhiwe nge rems, currentColor, kunye display: inline-flex. Oku kuthetha ukuba zinokuhlengahlengiswa ngokulula, zifakwe umbala kwakhona, kwaye zilungelelaniswe ngokukhawuleza.

Umda

Sebenzisa izinto eziluncedo zomda njengokwenza .m-5izithuba ezilula.

html

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

Ukubekwa

Sebenzisa izinto eziluncedo ze-flexbox , izinto ezidadayo , okanye izinto zolungelelwaniso lombhalo ukubeka izijikelezi-ndlela kanye apho uzifuna khona kuyo nayiphi na imeko.

Flex

html

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

Iyalayisha...

html

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

Izinto ezidadayo

html

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

Ukulungelelanisa okubhaliweyo

html

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

Ubungakanani

Yongeza .spinner-border-smkwaye .spinner-grow-smwenze i-spinner encinci enokuthi isetyenziswe ngokukhawuleza phakathi kwamanye amacandelo.

html

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

Okanye, sebenzisa i-CSS yesiko okanye izitayile ezingaphakathi ukuguqula imilinganiselo njengoko kufuneka.

html

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

Amaqhosha

Sebenzisa i-spinners ngaphakathi kwamaqhosha ukubonisa intshukumo ngoku okanye eyenzekayo. Ungatshintsha kwakhona umbhalo ngaphandle kwesipina kwaye usebenzise umbhalo weqhosha njengoko kufuneka.

html

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

html

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

CSS

Izinto eziguquguqukayo

Ifakwe kwi-v5.2.0

Njengenxalenye yendlela yokuguquguquka kwe-Bootstrap ye-CSS, ii-spinners ngoku zisebenzisa iiguquguquko ze-CSS zasekhaya .spinner-borderkunye .spinner-grownokuphucula ukwenziwa kwexesha lokwenyani. Amaxabiso okuguquguquka kweCSS asetwe ngeSass, ngoko ke ukwenziwa ngokwezifiso kweSass kusaxhaswa, nako.

Iinguqu zeborder spinner:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-border-width: #{$spinner-border-width};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-border;

Ukukhula okuguquguqukayo kwespinner:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-grow;

Kuzo zombini ii-spinners, iiklasi ezincinci zokuguqula i-spinner zisetyenziselwa ukuhlaziya amaxabiso ezi nguqu ze-CSS njengoko zifuneka. Umzekelo, .spinner-border-smiklasi yenza oku kulandelayo:

  --#{$prefix}spinner-width: #{$spinner-width-sm};
  --#{$prefix}spinner-height: #{$spinner-height-sm};
  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

Iinguqu zeSass

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

Amagama angundoqo

Isetyenziselwa ukwenza oopopayi be-CSS kwi-spinners zethu. Ibandakanyiwe kwi scss/_spinners.scss.

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

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