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.

html

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

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>

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!

html

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

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>

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.

html

<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

html

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

Ngamuat...

html

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

Ngapung

html

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

Teks ngajajar

html

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

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>

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

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>

Kancing

Anggo spinners dina tombol pikeun nunjukkeun yén tindakan ayeuna nuju diolah atanapi lumangsung. Anjeun oge bisa ngaganti téks kaluar tina unsur spinner sarta ngagunakeun tombol téks sakumaha diperlukeun.

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

Ditambahkeun dina v5.2.0

Salaku bagian tina pendekatan variabel CSS Bootstrap anu ngembang, spinner ayeuna nganggo variabel CSS lokal .spinner-bordersareng .spinner-growpikeun kustomisasi sacara real-time anu ditingkatkeun. Nilai pikeun variabel CSS diatur via Sass, jadi kustomisasi Sass masih dirojong, teuing.

Variabel spinner wates:

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

Tumuwuh variabel spinner:

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

Pikeun duanana spinners, kelas modifier spinner leutik dipaké pikeun ngapdet nilai variabel CSS ieu sakumaha diperlukeun. Salaku conto, .spinner-border-smkelas ngalakukeun ieu:

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

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