Source

Amaspinner

Bonisa isimo sokulayisha sengxenye noma ikhasi elinamaspinner e-Bootstrap, elakhiwe ngokuphelele nge-HTML, CSS, futhi ayikho i-JavaScript.

Mayelana

I-Bootstrap “spinners” ingasetshenziswa ukukhombisa isimo sokulayisha kumaphrojekthi akho. Akhiwe kuphela nge-HTML ne-CSS, okusho ukuthi awudingi i-JavaScript ukuze uwadale. Nokho, uzodinga i-JavaScript yangokwezifiso ukuze uguqule ukubonakala kwayo. Ukubukeka kwabo, ukuqondanisa, kanye nosayizi kungenziwa ngendlela oyifisayo kalula ngamakilasi ethu amangalisayo awusizo.

Ngezinjongo zokufinyelela, isilayishi ngasinye lapha sihlanganisa role="status"kanye nesidleke <span class="sr-only">Loading...</span>.

Isipina somngcele

Sebenzisa ama-spinner omngcele ukuze uthole inkomba yokulayisha engasindi.

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

Imibala

Isipina somngcele sisebenzisela currentColorsona border-color, okusho ukuthi ungakwazi ukwenza ngokwezifiso umbala ngezinsiza zombala wombhalo . Ungasebenzisa noma yiziphi izinsiza zethu zombala wombhalo kusipina esijwayelekile.

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

Why not use border-color utilities? Each border spinner specifies a transparent border for at least one side, so .border-{color} utilities would override that.

Growing spinner

If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!

<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

Once again, this spinner is built with currentColor, so you can easily change its appearance with text color utilities. Here it is in blue, along with the supported variants.

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

Alignment

Spinners in Bootstrap are built with rems, currentColor, and display: inline-flex. This means they can easily be resized, recolored, and quickly aligned.

Margin

Use margin utilities like .m-5 for easy spacing.

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

Placement

Sebenzisa izinsiza ze-flexbox , izinsiza ze- float , noma izinsiza zokuqondanisa umbhalo ukuze ubeke izipina lapho uzidinga khona kunoma yisiphi isimo.

I-Flex

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>
Iyalayisha... 
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>

Iyantanta

<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

Qondanisa umbhalo

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

Usayizi

Engeza .spinner-border-smfuthi .spinner-grow-smwenze isipina esincane esingasetshenziswa ngokushesha kwezinye izingxenye.

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

Noma, sebenzisa i-CSS yangokwezifiso noma izitayela ezisemgqeni ukuze uguqule ubukhulu njengoba kudingeka.

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

Izinkinobho

Sebenzisa ama-spinner ngaphakathi kwezinkinobho ukuze ubonise ukuthi isenzo okwamanje siyacutshungulwa noma senzekayo. Ungakwazi futhi ukushintsha umbhalo uphume entweni yesipina futhi usebenzise umbhalo wenkinobho njengoba kudingeka.

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