Share Tạo hiệu ứng hoạt hình loading với thư viện Repaintless.css

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Khi truy cập website các bạn sẽ cần một khoảng thời gian nhỏ để trang web hiển thị toàn bộ nội dung trên trình duyệt, trong khoảng thời gian chờ đợi này nhiều website thiết kế các biểu tượng chuyển động hoạt hình vừa giúp người dùng biết tình trạng tải trang cũng như tạo cảm giác mọi thứ đều đang hoạt động chứ không phải là đang chờ đợi. Có rất nhiều biểu tượng hoạt hình khác lạ từ cổ điển tới hiện đại và bao gồm cả các hiệu ứng vui nhộn. Với thư viện Repaintless.css các bạn có thể tạo ra hiệu ứng hoạt hình loading cho website với nhiều hiệu ứng khác nhau, đặc biệt là thư viện Repaintless.css được viết hoàn toàn bằng CSS nên rất nhẹ, gần như không làm ảnh hưởng tới website.

Các bạn tải thư viện Repaintless.css tại địa chỉ https://github.com/szynszyliszys/repaintless và tích hợp vào website với dòng mã lệnh HTML như sau:
HTML:
<link href="path/to/repaintless.min.css" rel="stylesheet">
Bây giờ, các bạn chỉ việc sử dụng các class CSS đã được định nghĩa từ thư viện Repaintless.css như ví dụ sau:
HTML:
<div class="element-animated tremble">Welcome to Gextend</div>
Các bạn có thể xem qua các demo của thư viện Repaintless.css tại địa chỉ http://szynszyliszys.github.io/repaintless cũng như tìm hiểu thêm các class CSS mà thư viện Repaintless.css cung cấp.
 
Back
Top