Bài 20 - Một số Spinner, Loading animation đẹp (phần 1)

1. Lời mở đầu

Chào các bạn!

Có lẽ không ít lần các bạn sẽ đau đầu về việc lựa chọn ảnh spinner, loading để sử dụng. Như các bạn cũng biết, đối với ảnh về loading hay spinner thì thường định dạng gif, mà những ảnh gif này phải có nền nếu không trông sẽ khá nham nhở. Tuy nhiên, nếu sử dụng những ảnh loading gif có nền thì độ thẩm mỹ sẽ bị giảm đi khá nhiều. Vậy giải pháp gì để có thể tạo những loading, spinner có nền transparent, nâng cao độ thẩm mỹ cho site của bạn? Câu trả lời ở đây là chúng ta sẽ dùng HTML, CSS3 để tạo các animation loading, spinner thay vì sử dụng các ảnh gif. Những tiện lợi khi dùng HTML. CSS3 thay thế cho ảnh thì có lẽ ai trong chúng ta đều biết.

• Giảm số lượng HTTP Request, giúp website của bạn load nhanh hơn.
• Dễ dàng thay đổi màu sắc, kích thước trong các trường hợp khác nhau
• Sử dụng CSS3 như transition, transform, text-shadow giúp các icon loading được linh hoạt hơn.

Sau một thời gian lang thang trên internet, mình đã sưu tầm được một số cách tạo loading, spinner animation trên codepen. Vậy nên, hôm nay mình sẽ chia sẻ những đoạn code khá hay này cho các bạn. Do số lượng cũng kha khá nên mình sẽ chia làm nhiều phần cho các bạn dễ theo dõi hơn nhé.

Note: Thay vì gõ code và chụp ảnh demo lại như các bài trước đây, các bài viết về chủ đề này mình sẽ nhúng code trực tiếp từ codepen để các bạn có thể xem một cách trực quan nhé.

2. Loading animation dạng tần số radio

3. Loading animation dạng youtube

4. Loading animation half circle

5. Loading animation button

6. Loading animation kiểu dotted

Như các bạn đã thấy, 5 dạng loading animation bên trên đều sử dụng HTML, CSS3 để tạo ra các icon loading rất đẹp. Đặc biệt, những loading animation này được tạo ra mà không cần dùng đến bất kỳ đoạn js hay jquery nào cả. Bật mí thêm nhé, những phần sau cũng chỉ sử dụng HTML và CSS3 để tạo các icon loading, spinner thôi đó.

Nếu bạn đang gặp khó khăn khi tìm kiếm những ảnh loading này thì còn chần chờ gì mà k lấy chúng về để sử dụng chứ?