#share: một số mẫu Loading spinner cực đẹp tháng 1/2019

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.

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ã HTMLCSS đơ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.

Còn lại chủ yếu sử dụng thuộc tính transform@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!

Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com