This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Thursday, 8 February 2018

[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 !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Niệm Style Blog 2/14/2018 07:49:00 AM
    Chúc mừng năm mới HHV nha, một năm mới thật dồi dào sức khoẻ và nhiều thành công nhé :)
    Please wait while i am loading Facebook SDK js