Tips CSS Cepat! Loader Animasi

Mari kita buat loader CSS animasi dengan properti kustom cakupan dan fungsi pengaturan waktu animasi

Buka CodePen dan buat pena baru.

Buat markup untuk loader. Perhatikan penggunaan properti kustom inline:

<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>

Anda juga dapat menggunakan generator (Pug) untuk mengonfigurasi jumlah baris:

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

Berikan beberapa gaya pada loader:

loader {
  --size: 10vmin;

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

Posisikan garis menggunakan pemosisian absolut dan kombinasi calc dengan transform:

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

Terapkan opasitas berdasarkan --index:

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

Mulailah.

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

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

Perhatikan penggunaan steps(var(--count)) untuk mendapatkan efek yang tepat ✨

Selesai! 🎉

Lebih suka dalam bentuk tweet? 🐦

Tetaplah Hebat! ʕ •ᴥ•ʔ