CSS İpucu! Animasyonlu Yükleyici

Kapsamlı özel özellikler ve animasyon zamanlama işleviyle animasyonlu bir CSS yükleyici oluşturalım

Jhey Tompkins

CodePen'e giderek yeni bir kalem oluşturun.

Yükleyicimiz için işaretleme oluşturun. Satır içi özel özelliklerin kullanımına dikkat edin:

<div class="loader" style="--count: 10">
  <span style="--index: 0"></span>
  <span style="--index: 1"></span>
  <span style="--index: 2"></span>
  <span style="--index: 3"></span>
  <span style="--index: 4"></span>
  <span style="--index: 5"></span>
  <span style="--index: 6"></span>
  <span style="--index: 7"></span>
  <span style="--index: 8"></span>
  <span style="--index: 9"></span>
</div>

Satır sayısını yapılandırmak için bir oluşturucu da (Pug) kullanabilirsiniz:

- const COUNT = 10
.loader(style=`--count: ${COUNT}`)
  - let i = 0
  while i < COUNT
    span(style=`--index: ${i}`)
    - i++

Yükleyicimize biraz stil verin:

loader {
  --size: 10vmin;

  height: var(--size);
  position: relative;
  width: var(--size);
}

Çizgilerimizi mutlak konumlandırmayı ve calc ile transform kombinasyonunu kullanarak konumlandırın:

.loader span {
  background: grey;
  height: 25%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%)
             rotate(calc(((360 / var(--count)) * var(--index)) * 1deg))
             translate(0, -125%);
  width: 10%;
}

--index değerine göre bir opaklık uygulayın:

.loader span {
  opacity: calc(var(--index) / var(--count));
} 

İşleri yoluna sokun!

.loader {
  animation: spin 0.75s infinite steps(var(--count));
}

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

Doğru etkiyi elde etmek için steps(var(--count)) kullanın. ✨

Bitti! 🎉

Bunu tweet biçiminde mi tercih edersiniz? 🐦

Mükemmel kalın! ism •ᴥ• IAM