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

Bài viết hướng dẫn cách thêm trạng thái tải trang giống với Youtube, sử dụng NProgress.

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

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

<link rel="stylesheet" href="css/nprogress.css">
<script src="js/nprogress.js"></script>
<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://www.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!