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 相关文章推荐
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
Node.js实现简单聊天服务器
Jun 20 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
Vue组件中slot的用法
Jan 30 Javascript
vue地区选择组件教程详解
May 04 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 Javascript
vue项目初始化到登录login页面的示例
Oct 31 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
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
预加载css或javascript的js代码
2010/04/23 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
Bootstrap布局组件应用实例讲解
2016/02/17 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
详解React 在服务端渲染的实现
2017/11/16 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
python生成指定长度的随机数密码
2014/01/23 Python
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
python脚本监控docker容器
2016/04/27 Python
python实现简单爬虫功能的示例
2016/10/24 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
python 反向输出字符串的方法
2018/07/16 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
物理研修随笔感言
2014/02/14 职场文书
小学运动会口号
2014/06/07 职场文书
教师职位说明书
2014/07/29 职场文书