Loading spinner là gì?
Loading spinner là hiệu ứng thể hiện trạng thái tải trang trong các trang web. Nhằm mục đích thông báo cho người dùng phải chờ đợi để quá trình tải hoàn tất. Hiệu ứng tải trang này sẽ có dạng kiểu xoay vòng spinner không phải dạng thanh ngang hoặc phần trăm…
Có rất nhiều cách để làm loading spinner. Trước đây, chúng ta hay sử dụng một bức ảnh động GIF để thể hiện. Tuy nhiên, ngày nay chúng ta có thể sử dụng HTML5 và CSS3 để thể hiện mà không cần phải sử dụng Javascript hoặc ảnh GIF. Từ đó chúng ta có thể giảm số lượng Request đến server, giúp website load nhanh hơn.
- Đừng quên: Hướng dẫn tạo hiệu ứng loading giống gmail
Bài viết sau chia sẻ cho các bạn một số mẫu Loading spinner cực đẹp mà mình sưu tầm được.
Một số mẫu loading đẹp
Reddit Mobile App Loading Spinner BY Daniel Miller
Mẫu loading này được thiết kế giống với của ứng dụng Reddit trên điện thoại của Daniel Miller. Mẫu gồm hai vòng tròn và bốn dấu chấm quay xung quanh. Mã HTML và CSS đơn giản và sạch sẽ. Toàn bộ hiệu ứng được dựng từ HTML và CSS mà không có sử dụng một tí hình ảnh nào.
Đoạn mã CSS các bạn bắt gặp ngay đầu tiên dưới đây là đoạn khai báo biến. Tương tự như khai báo trong các ngôn ngữ lập trình khác để chúng ta sử dụng sau này.
1 2 3 4 | html { --spinner: #1EAAF0; --center: translate(-50%, -50%); } |
Còn lại chủ yếu sử dụng thuộc tính transform và @keyframe để thể hiện hiệu ứng thôi.
See the Pen Reddit Mobile App Loading Spinner by Daniel Miller (@bronzebygold) on CodePen.
Simple CSS-only Loading Spinner BY Matt Sisto
Mẫu loading này còn đơn giản hơn nữa. Mã chỉ bao gồm một thẻ HTML còn lại CSS lo hết.
CSS3 Loading Spinner BY Matthew Roelle
Mẫu này được xây dựng từ năm nhóm thẻ div nhằm tạo hiệu ứng độc đáo.
CSS loading animation 12 BY Martin van Driel
Mẫu này gồm “ba phần tử” bay lượn giống các tiểu hành tinh bay xung quanh.
CSS Loading Spinners BY Beau
Mẫu này tổng hợp có bẩy mẫu spinner khác nhau.
Kết
Ngoài việc sử dụng những mẫu loading spinner được chia sẻ bên trên, chúng ta có thể truy cập trang https://loading.io/ để tham khảo nhiều mẫu khác nhau nữa.
Thông qua bài viết này, hy vọng bạn có thể làm đẹp cho website của mình. Chúc các bạn thành công!
You must log in to post a comment.