Basit CSS Spinner Oluşturucu

Bu spinner neden basit

Birçok yükleyici birden fazla iç içe öğe, arka plan resmi veya betik kullanır. Bu ise bir daire olarak biçimlendirilmiş tek bir div’dir. Halka bir kenarlıkla oluşturulur ve kenarlığın yalnızca üst kısmı farklı renktedir. Daire döndüğünde renkli kısım etrafta hareket eder. Tüm teknik dört fikre dayanır:

1. Genişliği ve yüksekliği eşit kare bir kutu.
2. Kutuyu daireye çeviren border-radius: 50%.
3. Bir yanı farklı renkli gri bir kenarlık, border-top-color.
4. Asla durmayan bir dönüş animasyonu.

Tam kod

.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); }
}

<div class="loader"></div>

Yükleyicinin tamamı bu kadar. İndirilecek bir şey ve güncel tutulması gereken bir bağımlılık yoktur.

Ortalama

Halka normal bir blok öğesidir. Sayfada veya bir kapsayıcının içinde ortalamak için yatay ortalama için .loader öğesine margin: 0 auto; ekleyin ya da üst öğeyi bir flex kapsayıcısı yapın:

.loading-area {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

Bu aracın yapmadıkları

• Yalnızca halka stilini üretir. Nokta satırları, çubuklar ve nabız yükleyicileri farklı tasarımlardır.
• İz rengi açık gri olarak sabittir; arka planınız koyuysa bunu kopyaladığınız CSS’te düzenleyin.
• İşaretlemenize erişilebilirlik öznitelikleri eklemez. role="status" ve aria-label değerlerini öğeye kendiniz ekleyin.

Kopyaladıktan sonra küçük ayarlar

Spinner yalnızca birkaç özellikten oluştuğu için düzenlemek kolaydır. Halkanın daha hafif görünmesini istiyorsanız kenarlık kalınlığını azaltın. Daha sakin hissettirmesi için animasyon süresini artırın. Aynı yükleyiciyi iki boyutta kullanmak istiyorsanız sınıfı bir kez kopyalayın ve ikinci sınıfta yalnızca width, height ve border-width değerlerini geçersiz kılın. Bu kadar kısa olması, basit bir spinner’ın başlıca avantajıdır: tüm kodu bir bakışta okuyabilir ve bir kütüphanede aramadan herhangi bir değeri değiştirebilirsiniz.

Ayrıca #eee değerini sayfanıza uygun bir renkle değiştirerek izi renklendirebilirsiniz; hareketli yay ise oluşturucuda seçtiğiniz rengi korur.