Chan Canvas – Thiết Kế Logo, Website, Bộ Nhận Diện Thương Hiệu

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.

Xem demo Tải về

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>

Tham khảo dịch vụ thiết kế website của chúng tôi.

Thiết Kế Website

Website thu hút thêm nhiều khách hàng với chi phí thấp, giúp đẩy mạnh hoạt động bán hàng mọi lúc mọi nơi, triển khai các chiến lược marketing hiệu quả và đặc biệt là nâng tầm uy tín, giá trị thương hiệu và giảm chi phí kinh doanh.

Giao diện hiện đại

Hoạt động ổn định

Tối ưu hóa công cụ tìm kiếm

Tối ưu trải nghiệm người dùng

Xem Chi Tiết

Đố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!