Cách thực hiện - 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 trình tải
Bước 1) Thêm HTML:
Ví dụ
<div class="loader"></div>
Bước 2) Thêm CSS:
Ví 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); }
}
Hãy tự mình thử »Ví dụ giải thích
Thuộc tính border
chỉ định kích thước đường viền và màu đường viền của trình tải. Thuộc tính border-radius
viền biến bộ tải thành hình tròn.
Thứ màu xanh quay xung quanh bên trong đường viền được chỉ định bằng thuộc tính border-top
. Bạn cũng có thể bao gồm border-bottom
, border-left
và/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 trình tải được chỉ định bằng thuộc tính width
và height
.
Cuối cùng, chúng tôi thêm animation
khiến vật 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à biến đổi. Bấm vào ví dụ để xem làm thế nào.
Thêm nhiều spinner hơn
Ví dụ
.loader {
border-top: 16px solid blue;
border-right:
16px solid green;
border-bottom: 16px solid red;
}
Hãy tự mình thử »Ví dụ
.loader {
border-top: 16px solid blue;
border-right: 16px
solid green;
border-bottom: 16px solid red;
border-left:
16px solid pink;
}
Hãy tự mình thử »Một vi dụ khac
Một 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: