+6

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

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é.


All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí