Saf CSS Yükleme Simgesi (Spinner)

Hiçbir görsel (imaj) materyal veya JavaScript koduna ihtiyaç duyulmadan tamamen saf CSS ile geliştirilmiş modern bir yükleme (spinner) simgesidir. conic-gradient ve mask (veya -webkit-mask) özellikleri harmanlanarak, etrafında pürüzsüz ve degrade (renk geçişli) izler bırakan şık bir dönüş animasyonu ortaya çıkarılmıştır.

Önizleme

Uygulama Kodu

Aşağıdaki kodları kopyalayıp projenizdeki ilgili HTML ve CSS dosyalarına doğrudan yapıştırarak kullanıma başlayabilirsiniz.

<!-- HTML -->
<div class="premium-spinner"></div>

/* CSS */
.premium-spinner {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: conic-gradient(
    from 90deg at 50% 50%,
    rgba(99, 102, 241, 0) 0%,
    rgba(99, 102, 241, 0.2) 20%,
    rgba(99, 102, 241, 1) 100%
  );
  /* İç kısmı oymak için maske ayarı */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff 0);
  animation: premium-spin 1s infinite linear;
}

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

Açıklama

• conic-gradient: Merkez noktasından başlayıp çevre boyunca renk geçişi sağlayan bir degrade oluşturur. Bu örnekte tam saydamdan (rgba(99, 102, 241, 0)) tam dolgun renge (rgba(99, 102, 241, 1)) doğru yumuşak bir geçiş uygulanarak, hızla dönüyormuş gibi bir iz (kuyruk) efekti yakalanmıştır.
• mask / -webkit-mask: radial-gradient özelliği bir maske işlevi görecek şekilde ayarlanmış ve elemanın tam orta kısmı saydam/şeffaf hale getirilmiştir. Koddaki calc(100% - 6px) ifadesinde yer alan 6px değerini dilediğiniz gibi değiştirerek çizgi kalınlığını kolayca ayarlayabilirsiniz.
• animation: Dönüş işlemi için @keyframes içerisinde transform: rotate(360deg) tanımlanmış ve linear zamanlama fonksiyonu atanarak animasyonun pürüzsüz, sabit bir hızda ve sonsuza dek sürmesi sağlanmıştır.