Share Tạo hiệu ứng loading đẹp mắt bằng CSS

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Với sự hỗ trợ mạnh mẽ CSS3 của các trình duyệt web hiện nay, các bạn hoàn toàn có thể tạo ra nhiều hiệu ứng hoạt hình đẹp mắt. Một trong số các hiệu ứng hoạt hình thường được sử dụng trên website đó chính là loading. Hiệu ứng loading được tạo ra với mục đích báo hiệu cho người dùng biết tiến trình đang được xử lý và chúng ta cần chờ đợi. Bài viết này tôi sẽ giới thiệu với các bạn một thư viện nhỏ dùng để tạo hiệu ứng loading chỉ với 3 chấm tròn nhưng với sự khéo léo của người phát triển, 3 chấm tròn này lại tạo ra nhiều hiệu ứng với hình dáng loading đẹp mắt, thư viện mà tôi đề cập đến đó là Three Dots.

Để sử dụng thư viện Three Dots, các bạn tải tại địa chỉ https://github.com/nzbin/three-dots và tích hợp vào website với dòng mã lệnh HTML như sau:
HTML:
<link href="path/to/three-dots.min.css" rel="stylesheet">
Bây giờ, các bạn tạo ra hiệu ứng loading chỉ với một thành phần HTML đơn giản như sau:
HTML:
<div class="dot-elastic"></div>
Thật sự rất đơn giản, dễ sử dụng, các bạn có thể tìm hiểu thêm các hiệu ứng loading khác của thư viện Three Dots tại địa chỉ https://nzbin.github.io/three-dots.
 
Back
Top