in English

Spinners

Nunjukkeun kaayaan loading komponén atawa kaca kalawan Bootstrap spinners, diwangun sagemblengna kalawan HTML, CSS, sarta euweuh JavaScript.

Dina kaca ieu

Ngeunaan

Bootstrap "spinners" tiasa dianggo pikeun nunjukkeun kaayaan loading dina proyék anjeun. Éta ngan ukur diwangun ku HTML sareng CSS, hartosna anjeun henteu peryogi JavaScript pikeun nyiptakeunana. Anjeun bakal kitu, perlu sababaraha custom JavaScript mun toggle pisibilitas maranéhanana. Penampilan, alignment, sareng ukuranana tiasa gampang disaluyukeun sareng kelas utiliti anu luar biasa.

Pikeun tujuan aksesibilitas, unggal loader di dieu ngawengku role="status"na nested <span class="visually-hidden">Loading...</span>.

Pangaruh animasi tina komponén ieu gumantung kana prefers-reduced-motionpamundut média. Tempo bagian gerak ngurangan tina dokuméntasi aksés kami .

Spinner wates

Paké spinners wates pikeun indikator loading lightweight.

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

Warna-warna

Spinner wates ngagunakeun currentColorpikeun na border-color, hartina anjeun bisa ngaluyukeun warna jeung utilitas warna téks . Anjeun tiasa nganggo salah sahiji utilitas warna téks kami dina 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>

Naha henteu nganggo border-colorutiliti? Unggal spinner wates nangtukeun transparentwates pikeun sahanteuna hiji sisi, jadi .border-{color}Utiliti bakal override éta.

Tumuwuh spinner

Mun anjeun teu fancy a spinner wates, pindah ka spinner tumuwuh. Sanaos sacara téknisna henteu spin, éta sababaraha kali tumuwuh!

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

Sakali deui, spinner ieu diwangun ku currentColor, sangkan anjeun bisa kalayan gampang ngarobah penampilan na kalawan Utiliti warna téks . Ieu mangrupikeun warna biru, sareng varian anu dirojong.

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

Ngajajar

Spinners di Bootstrap diwangun ku rems,, currentColorjeung display: inline-flex. Ieu ngandung harti yén maranéhna bisa kalayan gampang jadi ukuranana, recolored, sarta gancang Blok.

Margin

Anggo utilitas margin sapertos .m-5pikeun jarak anu gampang.

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

panempatan

Anggo utiliti flexbox , utilitas float , atanapi utilitas alignment téks pikeun nempatkeun spinners dimana anjeun peryogina dina kaayaan naon waé.

Flex

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

Ngamuat...

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

Ngapung

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

Teks ngajajar

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

Ukuran

Tambahkeun .spinner-border-smtur .spinner-grow-smnyieun spinner leutik nu bisa gancang dipaké dina komponén séjén.

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

Atanapi, paké CSS khusus atanapi gaya inline pikeun ngarobih dimensi upami diperyogikeun.

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

Kancing

Anggo spinners dina tombol pikeun nunjukkeun yén tindakan ayeuna nuju diolah atanapi lumangsung. Anjeun ogé tiasa ngagentos téks kaluar tina unsur spinner sareng nganggo téks tombol upami diperyogikeun.

<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

Dipaké pikeun nyieun animasi CSS pikeun spinners urang. Kaasup dina scss/_spinners.scss.

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

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