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 相关文章推荐
jQuery 使用手册(六)
Sep 23 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
Vue性能优化的方法
Jul 30 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
帅气的琦玉老师
2020/03/02 日漫
神族 Protoss 历史背景
2020/03/14 星际争霸
php 类自动载入的方法
2015/06/03 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
brook javascript框架介绍
2011/10/10 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
详解Typescript里的This的使用方法
2021/01/08 Javascript
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
学生个人求职自荐信格式
2013/09/23 职场文书
中专生自我鉴定书范文
2013/12/28 职场文书
企业给企业的表扬信
2014/01/13 职场文书
颁奖典礼主持词
2014/03/25 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
python not运算符的实例用法
2021/06/30 Python