Share Tạo thanh tiến trình tải trang đơn giản với thư viện Pill

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Trong thời gian đợi trang web tải toàn bộ nội dung, các bạn lập trình viên thường thiết kế một hoạt hình để báo hiệu cho người dùng biết. Nếu các bạn có kinh nghiệm tốt về JavaScript thì việc thiết kế hoạt hình đợi tải trang này sẽ không quá khó khăn nhưng đối với các bạn mới làm quen với JavaScript thì thật sự chỉ có sử dụng các thư viện hỗ trợ mới là giải pháp nhanh nhất. Để tạo thanh tiến trình tải trang đơn giản, các bạn có thể sử dụng thư viện Pill rất gọn nhẹ, dễ dàng khai báo sử dụng.

Các bạn có thể tải thư viện Pill tại địa chỉ https://github.com/rumkin/pill và tích hợp vào website với dòng mã lệnh HTML như sau:
HTML:
<script src="path/to/pill.js"></script>
Bây giờ, các bạn khai báo cấu hình thư viện Pill như ví dụ sau:
JavaScript:
//Khai báo thành phần hoạt hình
var indicator = document.querySelector('#indicator');

//Cấu hình thư viện
pill(
    '#content',
    {
        onLoading() {
            indicator.style.display = 'initial';
        },
        onReady() {
            indicator.style.display = 'none';
        }
    }
);
 
Back
Top