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 相关文章推荐
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
基于JQuery实现的Select级联
Jan 27 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
node将geojson转shp返回给前端的实现方法
May 29 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 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
基于Zend的Captcha机制的应用
2013/05/02 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
PHP实现股票趋势图和柱形图
2015/02/07 PHP
php工具型代码之印章抠图
2018/07/18 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
简单实现js放大镜效果
2017/07/24 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
python获取标准北京时间的方法
2015/03/24 Python
Python的Django框架下管理站点的基本方法
2015/07/17 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
Python实现Kmeans聚类算法
2020/06/10 Python
python多维数组切片方法
2018/04/13 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
python中元组的用法整理
2020/06/15 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
行政主管职责范本
2014/03/07 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
党风廉政建设责任书
2014/04/14 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
JavaScript异步操作中串行和并行
2021/11/20 Javascript