CSS Yükleyici Oluşturucu

Üretilen CSS nasıl çalışır

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

Spinner, kalın bir kenarlıkla çizilen bir dairedir. border-top-color kuralı halkanın yalnızca üst kısmını vurgu rengiyle boyar, böylece halka bir yay gibi görünür; @keyframes spin kuralı da onu merkezi etrafında döndürür. transform: rotate() ile döndürmek animasyonu hafif tutar, çünkü tarayıcı öğeyi kare kare yeniden çizmek yerine kompozitörde hareket ettirir.

Sayfada göstermek için bir öğe ekleyin ve CSS dosyasını yükleyin:

<div class="loader" role="status" aria-label="Yükleniyor"></div>

Erişilebilir hale getirin

• role="status" ekleyin, böylece ekran okuyucular spinneri seslendirir.
• aria-label değerine durum metnini yazın, örneğin “Yükleniyor”.
• İçeriği birkaç saniyeden uzun süre spinnerin arkasında gizlemeyin, zaman aşımı için bir yedek olmadan.
• prefers-reduced-motion tercihine saygı gösterin. Animasyonları kapatmış kullanıcılar için dönme animasyonunu basit bir solma efektiyle ya da statik bir “Yükleniyor…” metniyle değiştirin:

@media (prefers-reduced-motion: reduce) {
  .loader { animation: none; background: currentColor; opacity: .4; }
}

Ne zaman spinner, ne zaman iyimser arayüz

• 100 ms altında yanıt: spinnera gerek yok; insan gözü gecikmeyi neredeyse fark etmez.
• 100 ms – 1 s: ince bir spinner (küçük halka, “Yükleniyor…” düğme metni) çift tıklamaları önler.
• 1 s – 10 s: belirgin bir spinner, ölçülebiliyorsa ideal olarak ilerlemeyle birlikte.
• > 10 s: bu bir spinner sorunu değildir; neyin yavaş olduğunu bulup düzeltin.

Form gönderimleri ve düğme tıklamaları için düğmenin içindeki bir spinner, genellikle tüm sayfayı kaplayan bir katmandan daha iyidir.