Pemintal

Tunjukkan status pemuatan komponen atau halaman dengan pemintal Bootstrap, yang seluruhnya dibuat dengan HTML, CSS, dan tanpa JavaScript.

Di halaman ini

Tentang

Bootstrap "spinners" dapat digunakan untuk menunjukkan status pemuatan di proyek Anda. Mereka dibuat hanya dengan HTML dan CSS, artinya Anda tidak memerlukan JavaScript apa pun untuk membuatnya. Namun, Anda akan memerlukan beberapa JavaScript khusus untuk mengaktifkan visibilitasnya. Penampilan, keselarasan, dan ukurannya dapat dengan mudah disesuaikan dengan kelas utilitas kami yang luar biasa.

Untuk tujuan aksesibilitas, setiap pemuat di sini menyertakan role="status"dan file <span class="visually-hidden">Loading...</span>.

Efek animasi komponen ini bergantung pada prefers-reduced-motionkueri media. Lihat bagian pengurangan gerakan pada dokumentasi aksesibilitas kami .

Pemintal perbatasan

Gunakan pemintal perbatasan untuk indikator pemuatan ringan.

html

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

warna

Pemintal perbatasan menggunakan untuknya currentColor, yang border-colorberarti Anda dapat menyesuaikan warna dengan utilitas warna teks . Anda dapat menggunakan salah satu utilitas warna teks kami pada pemintal standar.

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>

Mengapa tidak menggunakan border-colorutilitas? Setiap pemintal perbatasan menentukan transparentbatas untuk setidaknya satu sisi, sehingga .border-{color}utilitas akan menimpanya.

Tumbuh pemintal

Jika Anda tidak menyukai pemintal perbatasan, beralihlah ke pemintal tumbuh. Meskipun secara teknis tidak berputar, ia tumbuh berulang kali!

html

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

Sekali lagi, pemintal ini dibuat dengan currentColor, sehingga Anda dapat dengan mudah mengubah tampilannya dengan utilitas warna teks . Ini dia dengan warna biru, bersama dengan varian yang didukung.

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>

Penyelarasan

Pemintal di Bootstrap dibuat dengan rems, currentColor, dan display: inline-flex. Ini berarti mereka dapat dengan mudah diubah ukurannya, diwarnai ulang, dan disejajarkan dengan cepat.

Batas

Gunakan utilitas margin seperti .m-5untuk jarak yang mudah.

html

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

Penempatan

Gunakan utilitas flexbox , utilitas float , atau utilitas perataan teks untuk menempatkan pemintal tepat di tempat yang Anda butuhkan dalam situasi apa pun.

Melenturkan

html

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

Memuat...

html

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

mengapung

html

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

Perataan teks

html

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

Ukuran

Tambahkan .spinner-border-smdan .spinner-grow-smbuat pemintal yang lebih kecil yang dapat dengan cepat digunakan di dalam komponen lain.

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>

Atau, gunakan CSS khusus atau gaya sebaris untuk mengubah dimensi sesuai kebutuhan.

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>

Tombol

Gunakan pemintal di dalam tombol untuk menunjukkan tindakan yang sedang diproses atau sedang berlangsung. Anda juga dapat menukar teks dari elemen pemintal dan menggunakan teks tombol sesuai kebutuhan.

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

Variabel

Ditambahkan di v5.2.0

Sebagai bagian dari pendekatan variabel CSS Bootstrap yang berkembang, pemintal sekarang menggunakan variabel CSS lokal .spinner-borderdan .spinner-growuntuk penyesuaian waktu nyata yang ditingkatkan. Nilai untuk variabel CSS diatur melalui Sass, jadi kustomisasi Sass juga masih didukung.

Variabel pemintal perbatasan:

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

Variabel pemintal yang berkembang:

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

Untuk kedua pemintal, kelas pengubah pemintal kecil digunakan untuk memperbarui nilai variabel CSS ini sesuai kebutuhan. Misalnya, .spinner-border-smkelas melakukan hal berikut:

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

Variabel Sass

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

Bingkai utama

Digunakan untuk membuat animasi CSS untuk pemintal kami. Termasuk dalam scss/_spinners.scss.

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

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