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 14 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
AngularJS基础 ng-if 指令用法
Aug 01 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 Javascript
ES6中的Javascript解构的实现
Oct 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
javascript 定义初始化数组函数
2009/09/07 Javascript
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
Python标准库与第三方库详解
2014/07/22 Python
Python装饰器用法实例总结
2018/02/07 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
python 实现两个线程交替执行
2020/05/02 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
如何整合JQuery和Prototype
2014/01/31 面试题
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
付款证明模板
2015/06/19 职场文书
vue 实现上传组件
2021/05/31 Vue.js
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫