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 相关文章推荐
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
深入解析Javascript闭包的功能及实现方法
Jul 10 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 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
PHP Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
jquery中的事件处理详细介绍
2013/06/24 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python复数属性和方法运算操作示例
2017/07/21 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
材料工程专业毕业生求职信
2014/03/04 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
初一军训感言
2015/08/01 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
nginx 添加http_stub_status_module模块
2022/05/25 Servers