- 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:
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:
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.
Để 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">
HTML:
<div class="dot-elastic"></div>