CÁCH LÀM - Trình tải CSS
Tìm hiểu cách tạo trình tải trước bằng CSS.
Cách tạo bộ tải
Bước 1) Thêm HTML:
Thí dụ
<div class="loader"></div>
Bước 2) Thêm CSS:
Thí dụ
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation:
spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform:
rotate(360deg); }
}
Giải thích ví dụ
Thuộc border
tính chỉ định kích thước đường viền và màu đường viền của trình tải. Thuộc border-radius
tính biến bộ nạp thành một vòng tròn.
Điều màu xanh lam quay xung quanh bên trong đường viền được chỉ định với thuộc
border-top
tính. Bạn cũng có thể bao gồm border-bottom
và border-left
/ hoặc
border-right
nếu bạn muốn có thêm "spinners" (xem ví dụ bên dưới).
Kích thước của bộ nạp được chỉ định với các thuộc tính width
và height
.
Cuối cùng, chúng tôi thêm một dấu animation
hiệu làm cho thứ màu xanh lam quay mãi mãi với tốc độ hoạt ảnh 2 giây.
Lưu ý: Bạn cũng nên bao gồm tiền tố -webkit- cho các trình duyệt không hỗ trợ các thuộc tính hoạt ảnh và chuyển đổi. Bấm vào ví dụ để xem làm thế nào.
Thêm nhiều người quay khác
Thí dụ
.loader {
border-top: 16px solid blue;
border-bottom: 16px solid blue;
}
Thí dụ
.loader {
border-top: 16px solid blue;
border-right:
16px solid green;
border-bottom: 16px solid red;
}
Thí dụ
.loader {
border-top: 16px solid blue;
border-right: 16px
solid green;
border-bottom: 16px solid red;
border-left:
16px solid pink;
}
Một vi dụ khac
Ví dụ về cách đặt trình tải ở giữa trang và hiển thị "nội dung trang" khi tải xong: