Tips CSS Cepat! Loader Animasi

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

Jhey Tompkins

Buka CodePen dan buat pena baru.

Buat markup untuk loader kita. 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 kita:

loader {
  --size: 10vmin;

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

Posisikan garis menggunakan penempatan 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));
} 

Buat semuanya berputar-putar!

.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 ini dalam bentuk tweet? 🐦

Tetap Hebat! `•ᴥ•`