Cách tạo: CSS bộ tải xuống

Học cách sử dụng CSS để tạo bộ tải xuống.

Thử nghiệm ngay

Cách tạo bộ tải xuống

Bước 1 - Thêm HTML:

<div class="loader"></div>

Bước 2 - Thêm CSS:

.loader {
  border: 16px solid #f3f3f3; /* xám nhạt */
  border-top: 16px solid #3498db; /* xanh蓝色 */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Thử nghiệm ngay

Ví dụ minh họa:

border đặc tính xác định kích thước và màu sắc của viền bộ tải xuống.border-radius đặc tính sẽ biến bộ tải xuống thành hình tròn.

phần xanh蓝色 ở bên trong viền sẽ quay bằng border-top đặc tính xác định. Nếu bạn muốn thêm nhiều “旋轉器”, bạn cũng có thể bao gồm border-bottom、border-left và/hoặc border-right（xem ví dụ dưới đây）。

Kích thước của bộ tải xuống được xác định bởi width và height đặc tính xác định.

Cuối cùng, chúng ta đã thêm một animation để phần xanh蓝色永远以 2 giây tốc độ animation quay.

Lưu ý:cho những người không hỗ trợ animation và transform của trình duyệt, bạn cũng nên bao gồm một -webkit- dấu hiệu. Hãy nhấp vào ví dụ để xem cách thực hiện.

thêm thêm các旋轉器

Mẫu

.loader {
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
}

Thử nghiệm ngay

Mẫu

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
}

Thử nghiệm ngay

Mẫu

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
}

Thử nghiệm ngay

Ví dụ khác

Cách đặt bộ tải vào giữa trang và hiển thị "Nội dung trang" khi tải xong:

Mẫu

Thử nghiệm ngay