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!