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 相关文章推荐
通过js脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
jqeury eval将字符串转换json的方法
Jan 20 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
vue组件暴露和.js文件暴露接口操作
Aug 11 Javascript
Vue和Flask通信的实现
May 19 Vue.js
微信小程序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 return语句的另一个作用
2014/07/30 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
JS 判断代码全收集
2009/04/28 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
Python中的异常处理学习笔记
2015/01/28 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
Python代码太长换行的实现
2019/07/05 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
python装饰器代码深入讲解
2021/03/01 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
法国珠宝店:CLEOR
2017/01/29 全球购物
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
英文道歉信
2015/01/20 职场文书
公务员年终个人总结
2015/02/12 职场文书
二审代理词范文
2015/05/25 职场文书
世界名著读书笔记
2015/06/25 职场文书
个人向公司借款协议书
2016/03/19 职场文书
Golang并发工具Singleflight
2022/05/06 Golang