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

Chào các bạn!

Chúng ta lại gặp lại nhau trong series bài viết về tạo các icon loading, spinner chỉ bẳng HTML5 và CSS3, không có chút xíu gì dính dáng tới Jquery cả. Ở 3 bài trước, mình cũng đã giới thiệu tới các bạn khá nhiều các mẫu đẹp. Đơn giản có, phức tạp cũng có.

Sau phần 3 mình đã dự định dừng lại series này tuy nhiên mình tại sưu tầm thêm được vài mẫu nữa cũng khá đẹp nên lại quyết định viết thêm 1 phần nữa. Có thể phần 4 này cũng là phần cuối của series này. Chỉ cần 4 phần này thôi thì các bạn cũng thoải mái mà lựa chọn cho mình mẫu loading hay spinner hợp ý rồi đúng không? Chúng ta cùng đi xem các mẫu mới và cũng là cuối này nhé.

1. Loading line

Đây đúng là 1 dạng mới sau hàng loạt các dạng dot, circle hay hafl circle nhỉ? Nó khá đơn giản và rất dễ tạo đó.

2. Loading Sticks

Lại thêm được 1 dạng mới nữa vào bộ sưu tập các mẫu loading, spinner rồi đó. Nom cũng khá vui mắt nhỉ?

3. Loading Circle

Nghe cái tên lại thấy quen thuộc rồi. Chúng ra tiếp tục có thêm 1 dạng loading circle nữa. Có điều, nếu như bạn nào tinh ý sẽ dễ dàng nhận ra: hiệu ứng chuyển động của loading này khá giống với hiệu ứng của cái loading sticks bên trên. Đúng là cùng 1 kiểu hiệu ứng đó, chỉ là hình dáng nó khác nhau mà thôi 😃

4. Loading circle simple

Sau vài cái loading hơi phức tạp thì giờ lại quay về với kiểu dáng simple này. Mình thấy kiểu simple này được sử dụng cũng khá nhiều đó chứ. Và chính mình cũng áp dụng kiểu dáng này trong cái dự án mình đang làm luôn. (Ồ, cái này có bị coi là tiết lộ bí mật dự án không nhỉ? Chắc là không đâu phải không?)

5. Loading multi color

Thực ra với cái style này thì mình cũng không biết nên đặt tên như nào cho đúng. Thôi thì cứ dựa vào việc nó có nhiều màu thì đặt tên như vậy. Quả thật, khi nhìn vào demo thì sẽ thấy loading này rất đẹp đúng không các bạn? Đẹp như vậy mà không dùng thì có phải là quá phí không?

6. Kết thúc

Như vậy, qua 4 bài viết với hàng loại các mẫu loading, spinner thì có lẽ các bạn cũng không cần tốn thời gian tìm kiếm mẫu yêu thích cho mình nữa rồi nhỉ? Hi vọng với series này có thể giúp ích cho các bạn trong việc lựa chọn mẫu loading, spinner phù hợp với web hay app của chính mình.

Chúc các bạn thành công!