Yükleme Spinner CSS Oluşturucu

Ne elde edersiniz

Oluşturucu iki kural yazar: bir .loader sınıfı ve bir @keyframes spin bloğu. Sınıf bir daire çizer, dairenin etrafına açık gri bir halka verir ve bu halkanın üst kenarını renklendirir. Keyframes daireyi tam bir tur döndürür; animation satırı bunu sonsuza kadar tekrarlar. Başka bir şey gerekmez: bir resim dosyası, simge yazı tipi veya betik yoktur.

Varsayılan değerlerle (60 px, 6 px halka, #10b981, 1 saniye) çıktı şöyle görünü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); }
}

Sayfanıza ekleyin

CSS’i stil sayfanıza yapıştırın, ardından spinner’ın görünmesini istediğiniz yere boş bir öğe ekleyin:

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

İş sürerken öğeyi gösterin; içerik geldiğinde öğeyi kaldırın veya display: none ile gizleyin. role ve aria-label öznitelikleri, ekran okuyucuların durumu duyurmasını sağlar.

İşe yarayan boyutlar

Pratik bir kural, kalınlığın çapın yaklaşık onda biri olmasıdır. Bundan çok ince bir halka yüksek çözünürlüklü ekranlarda soluk görünür; çok kalın bir halka ise bir lekeye dönüşür.

Bilmeniz gerekenler

• İz rengi açık gri (#eee) olarak sabittir. Koyu bir arka planda bu değeri kopyaladığınız CSS’te değiştirin.
• Araç tek bir dairesel spinner üretir. Noktalar, çubuklar ve diğer şekiller farklı işaretleme gerektirir.
• Projenizde loader adlı bir sınıf veya spin adlı bir animasyon zaten varsa, kuralların çakışmaması için kopyaladığınız CSS’te bunların adlarını değiştirin.

Gösterme ve gizleme

Bir yükleme spinner’ı iş başladığında görünmeli, iş bittiğinde kaybolmalıdır. Basit bir yöntem, öğede bir hidden özniteliği tutmak ve istek başladığında onu kaldırmaktır. Bekleme genellikle çok kısaysa halkayı göstermeden önce birkaç yüz milisaniyelik bir gecikme ekleyin; böylece hızlı yanıtlar spinner’ı bir an için yanıp söndürmez. Ne seçerseniz seçin, hata durumunda da spinner’ı gizleyin; aksi halde ziyaretçi zaten başarısız olmuş bir şeyi beklemeye devam eder.