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 Array.remove() 数组删除
Aug 06 Javascript
Javascript Request获取请求参数如何实现
Nov 28 Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
jquery将一个表单序列化为一个对象的方法
Jan 03 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
微信小程序实现留言功能
Oct 31 Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 Javascript
js回到页面指定位置的三种方式
Dec 17 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源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
php强制运行广告的方法
2014/12/01 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
python根据经纬度计算距离示例
2014/02/16 Python
python Django批量导入不重复数据
2016/03/25 Python
Python实现完整的事务操作示例
2017/06/20 Python
使用requests库制作Python爬虫
2018/03/25 Python
python写入已存在的excel数据实例
2018/05/03 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
Python reduce函数作用及实例解析
2020/05/08 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
经销商订货会主持词
2014/03/27 职场文书
滞留工资返还协议书
2014/10/19 职场文书
督导岗位职责
2015/02/04 职场文书
浅谈Java父子类加载顺序
2021/08/04 Java/Android
Android自定义双向滑动控件
2022/04/19 Java/Android