Di-spinner tša go dikološa

Bontšha boemo bja go laetša bja karolo goba letlakala ka di-spinner tša Bootstrap, tšeo di agilwego ka botlalo ka HTML, CSS, gomme go se na JavaScript.

Letlakaleng le

Mabapi le

Bootstrap “spinners” ka sebediswa ho bontša loading boemo ka diporojeke tse di hao. Di agilwe fela ka HTML le CSS, go ra gore ga o hloke JavaScript go di hlama. O tla, le ge go le bjalo, hloka JavaScript ye nngwe ya tlwaelo go fetoša go bonagala ga tšona. Ponagalo ya bona, go logaganya le go lekanyetša bogolo di ka rulaganywa gabonolo ka diklase tša rena tše di makatšago tša didirišwa.

Bakeng sa merero ya phihlelelo, loader e nngwe le e nngwe mo e akaretša role="status"le e nested <span class="visually-hidden">Loading...</span>.

Phello ya dipopaye ya karolo ye e ithekgile ka prefers-reduced-motionpotšišo ya methopo ya ditaba. Bona karolo ya tšhišinyego ye e fokoditšwego ya ditokomane tša rena tša phihlelelo .

Modiriši wa mollwane

Diriša di-spinner tša mollwane bakeng sa sešupo sa go rwala se se bobebe.

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

Mebala

Sedirišwa sa mollwane se šomiša currentColorbakeng sa sona border-color, go ra gore o ka tlwaetša mmala ka didirišwa tša mmala wa sengwalwa . O ka šomiša efe goba efe ya didirišwa tša rena tša mmala wa sengwalwa go spinner ya maemo.

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

Ke ka baka la’ng o sa diriše border-colordidirišwa tša motheo? Sedikološi se sengwe le se sengwe sa mollwane se laetša transparentmollwane bakeng sa bonyenyane lehlakore le tee, ka gona .border-{color}didirišwa tša motheo di be di tla tloša seo.

Go gola ga spinner

Ge o sa fancy border spinner, fetogela go grow spinner. Le ge e sa dikološe ka setegeniki, e gola leboelela!

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

Le mo nakong ye, sediriši se se agilwe ka currentColor, ka fao o ka fetoša ponagalo ya sona gabonolo ka didirišwa tša mmala wa sengwalwa . Mona ke ka putsoa, hammoho le dipharologanyo tšehetsoa.

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

Go logaganya

Di-spinner ka go Bootstrap di agilwe ka rems, currentColor, le display: inline-flex. Se se bolela gore di ka fetošwa bogolo gabonolo, tša fetošwa mebala le go logaganywa ka pela.

Magomo

Diriša didirišwa tša margin go swana le .m-5bakeng sa sekgoba se bonolo.

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

Go bewa ga dilo

Diriša didirišwa tša flexbox , didirišwa tša go phaphamala , goba didirišwa tša go logaganya sengwalwa go bea di-spinner tlwa moo o di nyakago gona boemong le ge e le bofe.

Mena

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

Go laetša...

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

Diphaphamadi

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

Sengwalwa sa logaganya

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

Bogolo

Oketša .spinner-border-smle .spinner-grow-smgo dira spinner ye nnyane yeo e ka šomišwago ka pela ka gare ga dikarolo tše dingwe.

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

Goba, šomiša CSS ya tlwaelo goba ditaele tša ka gare ga mothaladi go fetoša ditekanyo ka moo go nyakegago.

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

Dikonope

Šomiša di-spinner ka gare ga dikonope go laetša gore tiro yeo ga bjale e a šomago goba e a direga. O ka fapantšha gape sengwalwa go tšwa go elemente ya spinner gomme wa šomiša sengwalwa sa konope ka moo go nyakegago.

<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

Diphetogo

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

Diforeime tša bohlokwa

E šomišwa go hlama ditshwantšho tša dipopaye tša CSS tša di-spinner tša rena. E akareditšwe go scss/_spinners.scss.

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

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