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

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

Jhey Tompkins

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

Tạo mã đánh dấu cho trình tải của chúng tôi. Lưu ý cách sử dụng 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++

Cung cấp một số kiểu cho trình tải của chúng ta:

loader {
  --size: 10vmin;

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

Định vị các đường của chúng ta bằng cách sử dụng vị trí tuyệt đối và 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));
}

Hãy bắt đầu!

.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 thích nội dung này trong biểu mẫu tweet? 🐦

Chúc bạn luôn vui vẻ! ʕ •ᴥ•ʔ