Spinner

Nuduhake status loading komponen utawa kaca nganggo pemintal Bootstrap, dibangun kanthi HTML, CSS, lan ora ana JavaScript.

Ing kaca iki

Babagan

Bootstrap "spinners" bisa digunakake kanggo nuduhake status loading ing proyek sampeyan. Iki mung dibangun nganggo HTML lan CSS, tegese sampeyan ora butuh JavaScript kanggo nggawe. Nanging, sampeyan butuh JavaScript khusus kanggo ngalih visibilitas. Penampilan, keselarasan, lan ukurane bisa gampang disesuaikan karo kelas sarana sing apik tenan.

Kanggo tujuan aksesibilitas, saben loader kene kalebu role="status"lan nested <span class="visually-hidden">Loading...</span>.

Efek animasi saka komponen iki gumantung marang prefers-reduced-motionpitakon media. Deleng bagean gerakan suda saka dokumentasi aksesibilitas kita .

Pemintal wates

Gunakake spinner wewatesan kanggo indikator loading entheng.

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

werna-werna

Spinner wewatesan digunakake currentColorkanggo sawijining border-color, tegese sampeyan bisa ngatur werna karo keperluan werna teks . Sampeyan bisa nggunakake sembarang keperluan werna teks ing spinner standar.

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

Apa ora nggunakake border-colorutilitas? Saben spinner wewatesan nemtokake transparentwates paling sethithik sak sisih, supaya .border-{color}utilitas bakal ngatasi.

Tuwuh spinner

Yen sampeyan ora seneng spinner wewatesan, ngalih menyang spinner tuwuh. Nalika ora sacara teknis muter, bola-bali tuwuh!

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

Sawise maneh, spinner iki dibangun karo currentColor, supaya sampeyan bisa kanthi gampang ngganti tampilan karo keperluan werna teks . Ing kene ana warna biru, bebarengan karo varian sing didhukung.

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

Alignment

Spinners ing Bootstrap dibangun karo rems, currentColor, lan display: inline-flex. Iki tegese padha bisa gampang diowahi ukurane, recolored, lan cepet selaras.

Margin

Gunakake utilitas margin kaya .m-5kanggo spasi sing gampang.

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

Panggonan

Gunakake utilitas flexbox , utilitas float , utawa utilitas alignment teks kanggo nyelehake spinner ing ngendi sampeyan butuh ing kahanan apa wae.

Fleksibel

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

Loading...

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

Ngambang

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

Selarasake teks

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

Ukuran

Tambah .spinner-border-smlan .spinner-grow-smnggawe spinner cilik sing bisa digunakake kanthi cepet ing komponen liyane.

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

Utawa, gunakake CSS khusus utawa gaya inline kanggo ngganti dimensi kaya sing dibutuhake.

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

Tombol

Gunakake spinners ing tombol kanggo nunjukaké tumindak lagi proses utawa njupuk Panggonan. Sampeyan uga bisa ngganti teks metu saka unsur spinner lan nggunakake tombol teks yen perlu.

<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

Variabel

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

Keyframes

Digunakake kanggo nggawe animasi CSS kanggo spinner kita. Klebu ing scss/_spinners.scss.

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

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