Dalgalı Nokta Loader

Önizleme

Koyu bir arka planda üç boyut varyasyonu görüntülenir.

Kullanım durumları ve özellikleri

• Yükleme/işleme ekranı: Kullanıcıya bir API isteğinde bulunurken, veri alırken vb. bekleme durumunu bildirmek için kullanılır.

• Nokta sayısını serbestçe değiştirebilirsiniz: HTML’deki div.dot öğesini eklemeniz/silmeniz yeterlidir.

• Saf CSS: JavaScript gerekmez. Doğrudan ekran öğelerine yerleştirilebilir.

• Erişilebilirlik: aria-label="Loading" ve role="status" eklenerek ekran okuyucuyla uyumlu hale getirilir.

Tasarım ve kullanıcı deneyiminin önemli noktaları

1. Her nokta için 0,16 saniyelik gecikme: Bu gecikme dalgalı bir görsel ritim yaratır.

2. ‘giriş kolaylığı’ eğrisi: Her noktanın esnek bir sıçraması var gibi görünüyor.

3. `opaklık’ solması: Opaklık yükseldikçe azaltılarak hafif dans eden bir görsel efekt.

Nasıl kişiselleştirilir

Boyut farklılıkları (SM / MD / LG)

.dot-sm { width: 8px; height: 8px; }

.dot-md { width: 12px; height: 12px; }

.dot-lg { width: 18px; height: 18px; }

Animasyon hızını değiştirme

/* Daha hızlı */

.dot { animation-duration: 0.8s; }



/* Geç */

.dot { animation-duration: 2s; }

Özel renk

.dot { background: #f97316; } /* turuncu */

Uygulama kodu

<div class="dots-row" role="status" aria-label="Loading">

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

<div class="dot dot-md"></div>

</div>



<style>
.dots-row { display: flex; align-items: center; gap: 0.5rem; }

.dot {

width: 12px; height: 12px;

border-radius: 50%;

background: #6366f1;

animation: dots-wave 1.4s ease-in-out infinite;

}

.dot:nth-child(1) { animation-delay: 0s; }

.dot:nth-child(2) { animation-delay: 0.16s; }

.dot:nth-child(3) { animation-delay: 0.32s; }

.dot:nth-child(4) { animation-delay: 0.48s; }

.dot:nth-child(5) { animation-delay: 0.64s; }

@keyframes dots-wave {

0%, 60%, 100% { transform: translateY(0); opacity: 1; }

30% { transform: translateY(-12px); opacity: 0.7; }

}
</style>

Tarayıcı uyumluluk durumu

| Tarayıcı | Uyumluluk durumu |

|----------|----------|

| Krom 43+ | ✅ Tamamen uyumlu |

| Firefox 16+ | ✅ Tamamen uyumlu |

| Safari 9+ | ✅ Tamamen uyumlu |

| Kenar 79+ | ✅ Tamamen uyumlu |