in English

Ŝpiniloj

Indiku la ŝarĝan staton de komponanto aŭ paĝo per Bootstrap-spiniloj, konstruitaj tute kun HTML, CSS, kaj sen JavaScript.

Pri

Bootstrap "spinners" povas esti uzata por montri la ŝarĝan staton en viaj projektoj. Ili estas konstruitaj nur per HTML kaj CSS, tio signifas, ke vi ne bezonas JavaScript por krei ilin. Vi tamen bezonos iom da kutimo JavaScript por ŝanĝi ilian videblecon. Ilia aspekto, vicigo kaj grandeco povas esti facile personecigitaj per niaj mirindaj utilaj klasoj.

Por alireblecoj, ĉiu ŝargilo ĉi tie inkluzivas role="status"kaj nestitan <span class="sr-only">Loading...</span>.

La animacia efiko de ĉi tiu komponanto dependas de la prefers-reduced-motionamaskomunikila demando. Vidu la sekcion pri reduktita moviĝo de nia dokumentaro pri alirebleco .

Lima ŝpinisto

Uzu la randajn ŝpinilojn por malpeza ŝarĝa indikilo.

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

Koloroj

La randa ŝpinilo uzas currentColorpor sia border-color, signifante ke vi povas personecigi la koloron per tekstkoloraj utilecoj . Vi povas uzi iun ajn el niaj tekstkoloraj iloj sur la norma ŝpinilo.

Ŝargante...
Ŝargante...
Ŝargante...
Ŝargante...
Ŝargante...
Ŝargante...
Ŝargante...
Ŝargante...
<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>
Kial ne uzi border-colorutilecojn? Ĉiu limŝpinisto precizigas transparentlimon por almenaŭ unu flanko, do .border-{color}utilecoj superregus tion.

Kreskanta ŝpinisto

Se vi ne ŝatas randan ŝpinilon, ŝanĝu al la kreskiga ŝpinilo. Kvankam ĝi teknike ne turniĝas, ĝi plurfoje kreskas!

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

Denove, ĉi tiu ŝpinilo estas konstruita per currentColor, do vi povas facile ŝanĝi ĝian aspekton per tekstkoloraj utilecoj . Jen ĝi estas en blua, kune kun la subtenataj variantoj.

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

Vicigo

Ŝpiniloj en Bootstrap estas konstruitaj per rems, currentColor, kaj display: inline-flex. Ĉi tio signifas, ke ili povas facile esti regrandigi, rekolorigi kaj rapide vicigitaj.

Marĝeno

Uzu marĝenajn utilecojn kiel .m-5por facila interspaco.

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

Lokigo

Uzu flexbox-servaĵojn , flosajn ilojntekst -allinigajn ilojn por meti ŝpinilojn ĝuste kie vi bezonas ilin en ajna situacio.

Flex

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

Flosiloj

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

Teksto vicigi

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

Grandeco

Aldonu .spinner-border-smkaj .spinner-grow-smfari pli malgrandan ŝpinilon, kiu povas rapide esti uzata ene de aliaj komponantoj.

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

Aŭ, uzu kutimajn CSS aŭ enliniajn stilojn por ŝanĝi la dimensiojn laŭbezone.

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

Butonoj

Uzu ŝpinilojn ene de butonoj por indiki ke ago estas nuntempe prilaborata aŭ okazanta. Vi ankaŭ povas interŝanĝi la tekston el la ŝpinelemento kaj uzi butontekston laŭbezone.

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