Bootstrap 5 Yükleyici

Yükleyici

Spinner/yükleyici oluşturmak için kullanın: .yavaşlayıcı-sınır Sınıf:

Örnek

<div class="yavaşlayıcı-sınır"></div>

Kişisel olarak deneyin

Renkli yükleyici

Spinner'a renk eklemek için herhangi bir metin rengi utils kullanın:

Örnek

<div class="yavaşlayıcı-sınır text-yavan"></div>
<div class="yavaşlayıcı-sınır text-temel"></div>
<div class="yavaşlayıcı-sınır text-başarılı"></div>
<div class="yavaşlayıcı-sınır text-bilgi"></div>
<div class="yavaşlayıcı-sınır text-uyanık"></div>
<div class="yavaşlayıcı-sınır text-yanlış"></div>
<div class="yavaşlayıcı-sınır text-ikincil"></div>
<div class="yavaşlayıcı-sınır text-karışık"></div>
<div class="yavaşlayıcı-sınır text-ışık"></div>

Kişisel olarak deneyin

Büyüyen yükleyici

Eğer spinner/yükleyici büyüyüp "çevirmek" yerine "yavaşlayıcı" istiyorsanız, kullanın .yavaşlayıcı-çevrim-rotasyonu Sınıf:

Örnek

<div class="yavaşlayıcı-çevrim-rotasyonu text-yavan"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>

Kişisel olarak deneyin

Yükleyici Boyutu

Kullanın .spinner-border-sm veya .spinner-grow-sm Daha küçük yükleyici oluşturun:

Örnek

<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>

Kişisel olarak deneyin

Yükleyici Düğmesi

Ayrıca, metin olup olmadığına bakılmaksızın düğmeye yükleyici ekleyebilirsiniz:

Örnek

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Yükleniyor..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Yükleniyor..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Yükleniyor..
</button>

Kişisel olarak deneyin