本文主要详细介绍了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 })；
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。