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 相关文章推荐
完美解决AJAX跨域问题
Nov 01 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 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设计模式 Adapter(适配器模式)
2011/06/26 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
phpfpm的作用和用法
2019/10/10 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
Python实现身份证号码解析
2015/09/01 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
Python工程师面试必备25条知识点
2018/01/17 Python
python3.6数独问题的解决
2019/01/21 Python
详解重置Django migration的常见方式
2019/02/15 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
通过python3实现投票功能代码实例
2019/09/26 Python
QML使用Python的函数过程解析
2019/09/26 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
市场营销专业求职信
2014/06/17 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
文明礼仪主题班会
2015/08/13 职场文书
安全生产培训心得体会
2016/01/18 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript