How to use the NProgress.js loading progress plug-in in jQuery

NProgress is based on jquery, and the version must be >1.8 . This article mainly introduces the simple use of NProgress.js loading progress plug-in. Friends who need it can refer to

NProgress.js

Description:

NProgress is based on jquery, and the version must be >1.8

Download address:

https://github.com/rstacruz/nprogress

API:

NProgress.start() — 启动进度条
　　　　NProgress.set(0.4) — 将进度设置到具体的百分比位置
　　　　NProgress.inc() — 少量增加进度
　　　　NProgress.done() — 将进度条标为完成状态

Usage steps:

1. Introduce

<link rel="stylesheet" type="text/css" href="css/NProgress.css" rel="external nofollow" >
 <script src="js/NProgress.js" type="text/javascript"></script><br>//还有jquery要之前引入进来

2. Usage scenario 1: Page loading effect Start page loading Start progress bar Page loaded End Progress bar:

<em id="__mceDel"><script>
$(function() {
 　　NProgress.start();
 　　$(window).load(function() {
   　　NProgress.done();
 });
</script>
</em>

3. Usage scenario 2: Effect of ajax sending Start sending start progress bar After success End progress bar:

<script>
$(window).ajaxStart(function () {
  NProgress.start();
});
$(window).ajaxStop(function () {
  NProgress.done();
});
</script>
//技巧总结  此方法挂在window上 是为了监听项目中所有的ajax请求
//ajax事件 可参考 jquery 文档 http://jquery.cuishifeng.cn/

The above is what I compiled for everyone, I hope it will be useful in the future Everyone is helpful.

Related articles:

How to build a multi-person chat room in the nodejs express environment

Detailed interpretation of vue-admin and backend (flask) separation and combination

How to implement panda tv navigation using jquery css3

The above is the detailed content of How to use the NProgress.js loading progress plug-in in jQuery. For more information, please follow other related articles on the PHP Chinese website!