Hiển thị thanh tiến độ tải trang giống YouTube với NProgress

Xem demo Tải về

Hoặc xem demo ngay tại trang bài viết này nhé.

Tải NProgress

Bạn cần tải nprogress.css và nprogress.js tại liên kết trên và cho vào các thư mục.

init-html/
├── css/
│   ├── nprogress.css
├── js/
│   ├── nprogress.js

Thêm các thư viện.

<link rel="stylesheet" href="css/nprogress.css">
<script src="js/nprogress.js"></script>

Sau đó sử dụng như sau.

<script type="text/javascript">
    NProgress.configure({showSpinner: false});
    NProgress.start();
    $(window).load(function() {
        setTimeout(function() {
            NProgress.done();
        }, 500);
    });
</script>

Đối với sự kiện Ajax

Các bạn có thể đặt NProgress.start(); tại beforeSend và NProgress.done(); tại complete.

<script type="text/javascript">
    $.ajax({
        type: 'post',
        dataType: 'json',
        url: 'https://inithtml.com/wp-admin/admin-ajax.php',
        data: {
            'action': 'hello',
            'data': 'Hello World!'
        },
        beforeSend: function() {
            NProgress.start();
        },
        success: function(response) {
            if(response.success) {
                // Thành công
            }
        },
        complete: function() {
            setTimeout(function() {
                NProgress.done();
            }, 500);
        }});
</script>

Chúc các bạn thành công!