Một nút thông báo mỗi khi website bạn đang tải hẳn là rất cần thiết và dễ làm với một hình ảnh phải không. Nhưng nếu bạn có thể xây dựng nó bằng một class thì nó sẽ linh động hơn rất nhiều và dễ sử dụng hơn kha khá đó.
Demo:
Việc xây dựng lại cực kì đơn giản bằng một vài đoạn mã nhỏ như sau:
CSS:
.loading {
border: 6px solid #f3f3f3; /* Light grey */
border-top: 6px solid #3498db; /* Blue */
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
HTML:
Bài note nhanh cho bạn nào cần nên cũng không chăm chút lắm :)