[WebDesign] Hướng dẫn thêm hiệu ứng loading pace cho website

Hello xin chào các bạn, với mỗi chúng ta thời gian đợi load hết 1 trang web luôn là khoảng thời gian vô bổ nhất, vì thế hãy thêm 1 chút hiệu ứng vào cho nó thêm chút màu sắc nhé :)

Trước tiên xem demo tại trang tools của tôi
 DEMO
Với hiệu ứng này, trang nào load càng lâu thì ta xem càng rõ

OK, nếu đã bồ kết thì ta bắt đầu triển khai thôi. Thủ thuật này cực kì dễ vì ta chỉ cần nhúng 1 file js và 1 file theme tùy chọn màu sắc vào là xong

Tại thời điểm viết bài pace đang có version 1.0.2

Như thường lệ đăng nhập vào trang quản trị và vào mục chỉnh sửa HTML

Dán đoạn js sau trước thẻ đóng </head>

<!-- Get the lastest version: https://cdnjs.com/libraries/pace -->
<script src='//cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js'  type='text/javascript'/>

Tiếp theo bạn sẽ lựa chọn cho mình 1 theme và màu sắc phù hợp với phong thủy của bạn. Tại thời điểm viết bài pace hỗ trợ 14 themes và 10 màu sắc khác nhau cho bạn lựa chọn

Bạn truy cập vào trang example để lấy tên theme. Truy cập cdn để lấy link css ứng với theme và màu bạn đã chọn, sau đó dán tiếp code css vào trước thẻ đóng </head>
ví dụ

<link href='//cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/black/pace-theme-loading-bar.min.css' rel='stylesheet' type='text/css'/>

Nếu không nhầm thì hiện tại youtube cũng sử dụng hiệu ứng loading bar kiểu này, ngoài thẩm mỹ ra nó còn giúp ta nhận biết khi nào trang đã được tải xong.

Với thủ thuật đơn giản này hi vọng sẽ giúp ích cho bạn trong quá trình duy trì và phát triển website của mình

Để lại nhận xét nếu chưa làm được. Good Luck !