本文主要详细介绍了NProgress显示顶部进度条的效果和使用方法，有一定的参考价值，感兴趣的朋友可以参考一下。

NProgress实现了显示和加载进度条的效果，有逼真的动画涓涓细流来说服你的用户，没有页面跳转效果，大大提升了用户体验。

1. 官网

实现效果如下GIF图所示：(请求的数据比较小，所以运行比较快。把开发者工具网络设置成3G以下的网速可以看得更清楚)

2. 引入需要的 nprogress.css 和 nprogress.js 文件

link rel= style sheet type= text/CSS href= nprogress . CSS rel= external no follow /

script src= nprogress . js /script

3.基本用法：只需调用NProgress的start()和done()的API来控制进度条即可。

NProgress最重要的两个API是start()和done()，基本够用了。

nprogress . start()；//显示进度栏

nprogress . done()；//完成进度条

下面是结合ajax start()和ajaxStop()全局事件代码实现加载效果。

身体

按钮id=btn 请求/按钮

script src= nprogress . js /script

script src=jquery.js/script

脚本

$(文档)。ajaxStart(function () {

//请求已经开始。

nprogress . start()；

})。ajaxStop(function () {

//请求结束。

nprogress . done()；

})

$(#btn )。on(click ，function () {

$.get(time.php )

})

/脚本

/body

实施效果：(GIF)

4. NProgress 其他高级用法

(1)百分比：通过设置进度的百分比，调用。设置(n)控制进度，其中n的取值范围为0-1。

nprogress . set(0.0)；

nprogress . set(0.4)；

nprogress . set(1.0)；

(2)增量：要增加进度条，只需调用。inc()。这样会产生一个随机的增量，但不会让进度条达到100%。此功能适用于图像加载或其他类似的文件加载。

nprogress . Inc()；

(3)强制完成：通过将true参数传递给done()，使进度条充满，即使不显示。

nprogress . done(true)；

5. NProgress 其他配置

(1)最小：设置最小百分比。

nprogress . configure({最小值：0.1 })；

(2)模板：改变进度条的HTML结构。为了确保进度条能够正常工作，元素需要有role=bar 属性。

NProgress.configure({

模板：“div class=”../div

});

(3)ease:调整动画设置。ease可以传递CSS3缓冲动画字符串(如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier)。速度是动画速度(以毫秒为单位)。

nprogress . configure({ ease: ease ，速度：500 })；

这就是本文的全部内容。希望对大家的学习有帮助，支持我们。