Chào các bạn!
Tiếp tục về seri về tạo spinner, loading chỉ với HTML5 và CSS3, mình sẽ giới thiệu thêm 5 demo nữa về “bộ sưu tập” spinner, loading cho các bạn cùng tham khảo nhé.
1. Loading dot
Ở các bài trước, cũng có demo loading dạng dot như thế này. Tuy nhiên style thì nó lại khác nhau nên bạn nào ưa thích loading dạng dot thì thoải mái lựa chọn nhé.
2. Loading spinner pure
Loading pure là 1 dạng khá được ưa chuộng và rất hay được sử dụng. Bây giờ bạn có thể thoải mái sử dụng loading dạng pure này mà không cần sử dụng ảnh gif khiến cho site nặng nề thêm. Rất đơn giản, chỉ là 1 dòng HTML và 1 đoạn ngắn CSS3 mà thôi.
3. Loading half circle
Thực ra, tên goi này cũng chưa chính xác cho lắm. Nhưng khi nhìn demo các bạn sẽ thấy dạng loading cũng được sử dụng rất nhiều. Xem demo dưới đây nhé:
4. Loading dot and circle
Nhìn title chắc bạn sẽ nghĩ: lại là dot và circle. Nhưng hãy yên tâm, cùng tên nhưng khác style với những dot và circle bên trên và ở các bài trước đó nhé. Demo này hay ở 1 chỗ là nó có combo 3 loading với 3 style khác nhau. Cùng xem demo nào
5. Loading circle multi color
Vâng, chính xác lại là loading circle. Nhưng loading này sẽ cho bạn thấy nhiều màu sắc rất đẹp mắt.
OK! Đến bài này thì chúng ta cũng tích cóp được khá nhiều dạng loading và spinner rồi. Các bạn cũng có thể thoải mái lựa chọn dạng mình thích để sử dụng. Hi vọng các bạn có thể ủng hộ seri này của mình nhé.
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chính1. Loading dot2. Loading spinner pure3. Loading half circle4....
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chính1. Loading dot2. Loading spinner pure3. Loading half circle4. Loading dot and circle5. Loading circle multi color1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng hoạt động trên Linux...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chính1. Loading dot2. Loading spinner pure3. Loading half circle4. Loading dot and circle5. Loading circle multi colorV. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5. Bypass lỗ hổng khi...
Directory traversal vulnerabilities (phần 3)
Nội dung chính1. Loading dot2. Loading spinner pure3. Loading half circle4. Loading dot and circle5. Loading circle multi colorV. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ hổng xảy ra khi...
Directory traversal vulnerabilities (phần 2)
Nội dung chính1. Loading dot2. Loading spinner pure3. Loading half circle4. Loading dot and circle5. Loading circle multi colorIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ lập trình khác nhau,...