Mẹo CSS nhanh chóng! Trình tải ảnh động

Hãy cùng tạo một trình tải CSS ảnh động với các thuộc tính tuỳ chỉnh theo phạm vi và hàm thời gian ảnh động

Jhey Tompkins

Chuyển đến CodePen và tạo một cây bút mới.

Tạo mã đánh dấu cho trình tải của chúng tôi. Lưu ý rằng việc sử dụng các thuộc tính tuỳ chỉnh cùng dòng:

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

Bạn cũng có thể sử dụng trình tạo (Pug) để định cấu hình số lượng dòng:

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

Tạo một số kiểu cho trình tải của chúng tôi:

loader {
  --size: 10vmin;

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

Định vị các đường bằng cách sử dụng vị trí tuyệt đối và kết hợp calc với 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%;
}

Áp dụng độ mờ dựa trên --index:

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

Bắt đầu phát triển mọi thứ!

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

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

Lưu ý việc sử dụng steps(var(--count)) để có được hiệu ứng phù hợp ✨

Xong! 🎉

Bạn muốn nhận nội dung này ở biểu mẫu đăng trên Twitter? 🐦

Hãy giữ tuyệt vời! е •ᴥ• {/0}