NProgress显示顶部进度条效果及使用详解


Posted in Javascript onSeptember 21, 2019

NProgress实现显示加载进度条效果,具有逼真的动画涓涓细流来说服你的用户,无页面跳转效果 ,极大提高用户体验效果

1. 官网下载地址

实现效果如下GIF图片所示:(请求的数据比较小,所以跑得比较快,可以开发者工具Network设置为3G以下网速看得更清晰点)

NProgress显示顶部进度条效果及使用详解

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

NProgress显示顶部进度条效果及使用详解

<link rel="stylesheet" type="text/css" href="nprogress.css" rel="external nofollow" />
<script src="nprogress.js"></script>

3. 基本用法:只需要调用NProgress的 start() 和 done() 的API来控制进度条

NProgress最重要两个API就是start()和done(),基本一般用这两个就足够了。
·
NProgress.start(); //显示进度条
NProgress.done(); //完成进度条

·

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

<body>
 <button id="btn">请求</button>
 <script src="nprogress.js"></script>
 <script src="jquery.js"></script>
 <script>
 $(document)
 .ajaxStart(function () {
 //请求开始了
 NProgress.start();
 })
 .ajaxStop(function () {
 //请求结束了
 NProgress.done();
 })
 $('#btn').on('click', function () {
 $.get('time.php')
 })
 </script>
</body>

实现效果:(GIF)

NProgress显示顶部进度条效果及使用详解

4. NProgress 其他高级用法

(1)百分比:通过设置progress的百分比,调用 .set(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)minimum:设置最低百分比

NProgress.configure({minimum:0.1});

(2)template:改变进度条的HTML结构。为保证进度条能正常工作,需要元素拥有role='bar'属性。

NProgress.configure({
 template:"<div class='....'>...</div>"
});

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

NProgress.configure({ease:'ease',speed:500});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
javascript仿qq界面的折叠菜单实现代码
Dec 12 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
node实现定时发送邮件的示例代码
Aug 26 Javascript
JSON 数据格式详解
Sep 13 Javascript
js闭包学习心得总结
Apr 17 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
js实现贪吃蛇小游戏
Oct 29 Javascript
vue开发拖拽进度条滑动组件
Sep 21 #Javascript
layui点击弹框页面 表单请求的方法
Sep 21 #Javascript
使用vue制作滑动标签
Sep 21 #Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 #Javascript
Vue插件之滑动验证码
Sep 21 #Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 #Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 #Javascript
You might like
一个高ai的分页函数和一个url函数
2006/10/09 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
详解jquery和vue对比
2019/04/16 jQuery
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
Python制作简单的网页爬虫
2015/11/22 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
python 调试冷知识(小结)
2019/11/11 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
小学师德标兵先进事迹材料
2014/05/25 职场文书
励志演讲稿500字
2014/08/21 职场文书
超市开店计划书
2014/09/15 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
销售经理岗位职责
2015/01/31 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
小学安全教育主题班会
2015/08/12 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android
Vue h函数的使用详解
2022/02/18 Vue.js
Vue全局事件总线你了解吗
2022/02/24 Vue.js