pace.js和NProgress.js两个加载进度插件的一点小总结


Posted in Javascript onJanuary 31, 2018

这两个插件都是关于加载进度动画的,应该说各有特点吧,最起码对我来说是各有优势的。今天一天就捣鼓了加载进度动画,也研究了大量的(也就这两个)加载进度动画,也算对加载进度动画有了一个初步的了解了吧。

NProgress.js

NProgress是基于jquery的,且版本要 >1.8

API:

 

NProgress.start() — 启动进度条

NProgress.set(0.4) — 将进度设置到具体的百分比位置

NProgress.inc() — 少量增加进度

NProgress.done() — 将进度条标为完成状态

引入:

<link rel="stylesheet" type="text/css" href="css/NProgress.css" rel="external nofollow" >
 <script src="js/NProgress.js" type="text/javascript"></script><br>//还有jquery要引入进来

使用:

<script>
$(function() {
 NProgress.start();
 
$(window).load(function() {
 
NProgress.done();
 });
</script>

自定义动画样式:

将我们定义的样式写到一个script标签里,这算是一个小技巧吧。

<script type="text" id="myId"><br><div class="splash card"><br> 
<p class="lead" style="text-align:center">不要回来,马上走开...</p>

 <div class="progress">
 
<div class="mybar" role="bar">
 
</div>
 
</div>
</div><br></script>

这是css

html,body,iframe{
 margin: 0;
 padding: 0;
}
#nprogress{
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: #f7f7f7;
 z-index: 999;
}
.spinner-icon{
 display: none!important;
}
.splash {
 position:absolute;
 top:40%;
 left:0;
 right:0;
 margin: auto;
 }
 .splash img {
 display: block;
 margin-left: auto;
 margin-right: auto;
 height: 100px;
 width: 100px;
 }
 .card {
 background-color: #f7f7f7;
 padding: 20px 25px 15px;
 margin: 0 auto 25px;
 width: 380px;
 }
 .mybar {
 background: #29d;
 height:10px;
 }
 .progress {
 height: 10px;
 overflow: hidden;
 }

js代码变成了这样:

<script type="text/javascript">
 $(function(){
  NProgress.configure({
  template: $('#myId').html() // template是用来设置动画样式的属性
  });
  NProgress.start();
 });
 $(window).load(function(){
  NProgress.done();
 })
 </script>

总结:在js里控制动画什么时候开始,什么时候结束,已及加载的动画样式。

在自定义样式里关键的两个指针就是  role 属性:

role=bar :横向加载条

role=spinner 旋转的小圈

样例2:(省略了css)

<script type="text" id="myId">
<em id="__mceDel"><em id="__mceDel"><div class="bar" role="bar" style="display=block"><br>

<div class="peg"></div><br>
</div><br>
<div class="spinner" role="spinner"><br>

<div class="spinner-icon"></div><br>
</div></em></em>
</script>

pace.js:

API:

Pace.start:开始显示进度条,如果你不是使用AMD或者Browserify来加载模块的话,这个会默认执行。
Pace.restart:进度条重新加载以及显示。
Pace.stop:隐藏进度条以及停止加载。
Pace.track:监测一个或者多个请求任务。
Pace.ignore:忽略一个或者多个请求任务。 

用法:

<head>
 <script src="/pace/pace.js"></script>
 <link href="/pace/themes/pace-theme-barber-shop.css" rel="external nofollow" rel="stylesheet" /> <br><!-- 此处的css样式就决定了加载进度动画的样式 -->
</head>

改变动画样式:

pace里已经设计好了许多种加载进度动画,只需要变化css文件就可以了

总结:

pace的优点有直接引入文件就可以了,不需要在自己写任何代码,就自带了加载进度动画,只是有一个缺点,官网提供的加载进度动画都没有遮罩层。

当然,可以自己进行设置(我不会);

以上所述是小编给大家介绍的pace.js和NProgress.js两个加载进度插件的一点小总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript各种复制代码收集
Sep 20 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
微信小程序App生命周期详解
Jan 31 #Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 #jQuery
微信小程序switch组件使用详解
Jan 31 #Javascript
vue项目中导入swiper插件的方法
Jan 30 #Javascript
微信小程序实现手势图案锁屏功能
Jan 30 #Javascript
简单理解Vue中的nextTick方法
Jan 30 #Javascript
Vue组件中slot的用法
Jan 30 #Javascript
You might like
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
php简单防盗链实现方法
2015/07/29 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
在视频前插入广告
2006/11/20 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
javascript制作2048游戏
2015/03/30 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
大型车展策划方案
2014/02/01 职场文书
暑期社会实践感言
2014/02/25 职场文书
施工安全标语
2014/06/07 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
工商局调档介绍信
2015/10/22 职场文书
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL