Bootstrap Spinner'lar, kullanıcıların bir sayfa veya işlemin yüklendiğini belirtmek için kullanılan animasyonlu yüklenme göstergeleridir. Bu bileşenler, bir sayfanın yüklenmesi veya bir veri işleminin tamamlanmasını beklerken kullanıcıya görsel bir geri bildirim sağlar.
Temel Kullanım
Bootstrap'ta spinner-border veya spinner-grow sınıflarını kullanarak iki farklı türde spinner oluşturabilirsiniz:
Spinner Border: Dönen bir çerçeve şeklinde olan klasik yükleme göstergesidir.
<div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div>Spinner Grow: Büyüyen ve küçülen animasyona sahip olan alternatif bir yükleme göstergesidir.
<div class="spinner-grow" role="status"> <span class="visually-hidden">Loading...</span> </div>
Renkler
Spinner'lar Bootstrap'in varsayılan renk sınıfları ile uyumlu hale getirilebilir. Örneğin, text-primary, text-secondary, text-success gibi sınıflar eklenerek spinner'ın rengi değiştirilebilir.
<div class="spinner-border text-primary" role="status"></div>
<div class="spinner-border text-success" role="status"></div>
<div class="spinner-grow text-danger" role="status"></div>
Boyutlar
Spinner'lar varsayılan boyutlarda gelir, ancak daha küçük veya daha büyük yapmak için spinner-border-sm veya spinner-grow-sm sınıflarını kullanabilirsiniz.
<div class="spinner-border spinner-border-sm" role="status"></div>
<div class="spinner-grow spinner-grow-sm" role="status"></div>
Esneklik ve Yerleştirme
Spinner'lar butonlar, kartlar veya herhangi bir bileşenle birleştirilerek kullanılabilir. Özellikle butonlar için yükleme durumunu göstermek amacıyla yaygındır.
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
Erişilebilirlik
Spinner'ların içine visually-hidden sınıfıyla bir açıklama eklemek, ekran okuyucular için yüklenme göstergesinin anlamlı olmasını sağlar.
Bootstrap Spinners bileşenleri ile yükleme durumlarını belirtmek, kullanıcı deneyimini daha akıcı hale getirir ve sitenizin veya uygulamanızın daha dinamik görünmesini sağlar.