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

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">

 <script src="js/NProgress.js" type="text/javascript"></script>
//还有jquery要引入进来

　　  使用：

<script>
　　$(function() {

    　　NProgress.start();

    　　$(window).load(function() {

        　　NProgress.done();

    });
 </script>

　　自定义动画样式：

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

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

        　　<div class="mybar" role="bar">

        　　</div>

    　　</div>

　　</div>
</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">

　　<div class="bar" role="bar" style="display=block">
　　　　<div class="peg"></div>
　　</div>
　　<div class="spinner" role="spinner">
　　　　<div class="spinner-icon"></div>
　　</div>

</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" />  
　　<!-- 此处的css样式就决定了加载进度动画的样式 -->

</head>

　　　　　改变动画样式：

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

　　　　总结：

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

　　　　　　当然，可以自己进行设置（我不会）；

pace.js和NProgress.js两个加载进度插件的一点小总结的更多相关文章

  1. NProgress.js加载进度插件的简单实用方法

    NProgress.js 说明: NProgress是基于jquery的,且版本要 >1.8 下载地址: https://github.com/rstacruz/nprogress API: N ...

  2. 《动手实现一个网页加载进度loading》

    loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达.最常见的比如"转圈圈" ...

  3. Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果

    在页面中引入 Pace.js  和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...

  4. pace.js – 加载进度条插件

    这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...

  5. pace.js – 网页自动加载进度条插件

    网站顶部的页面加载进度条是怎么实现的,页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天就为大家介绍这样子的一款插件:pace.js. [官方网 ...

  6. angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js

    用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所 ...

  7. 使用 JS 嵌入的方式来加载 Flash 插件，在各浏览器中播放视频

    嵌入插件 使用 object 和 embed 标签 这种方法用到的是 Object 和 Embed 标签,可以看到 object 的很多参数和 embed 里面的很多属性是重复的.浏览器兼容性,有的浏 ...

  8. js实现类型jq的dom加载完成

    有时候我们只想在 dom 加载完成后运行 js ,而不是等所有图片加载完成.所以不需要 onload , onload 会加载图片等其他媒体.很消耗时间. 原:http://blog.csdn.net ...

  9. 【转】js JavaScript 的性能优化：加载和执行

    JavaScript 的性能优化:加载和执行 转自:https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/ 随着 Web2.0 技术的 ...

随机推荐

  1. [英] 推荐 15 个 jQuery 选择框插件

    jQuery Selectbox Plugins let you create beautiful and eye catching select box for your websites inst ...

  2. SQL查询集合合并成字符串

    有时候需要查询某一个字段,并把查询结果组成一个字符串,则: ) SELECT @str=isnull(@str+',','')+列名 FROM 表名 SELECT @str

  3. .htaccess 语法以及应用

    [转] http://blog.sina.com.cn/s/blog_6e8b46e701014drc.html http://blog.sina.com.cn/s/blog_6e8b46e70101 ...

  4. 学习Sass之安装Sass（一）

    为什么使用Sass 作为前端(html.javascript.css)的三大马车之一的css,一直以静态语言存在,HTML5火遍大江南北了.javascript由于NODE.JS而成为目前前后端统一开 ...

  5. 二十二、【轻量级开源框架】EFW框架Web前端开发之JqueryEasyUI

    回<[开源]EFW框架系列文章索引>        EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan ...

  6. toad 常用快捷键与配置

    F8 调出以前执行的sql命令 F9 执行全部sql Ctrl+. 补全table_name Ctrl+t 补全table_name,或者显示字段 alt+ 箭头上下 看sql history Ctr ...

  7. Android动画效果translate、scale、alpha、rotate详解

    动画类型 Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面 ...

  8. 用x86的模拟器内核记得安装intel的haxm

    Android 模拟器一直以运行速度慢著称, 本文介绍使用 Intel HAXM 技术为 Android 模拟器加速, 使模拟器运行度媲美真机, 彻底解决模拟器运行慢的问题. Intel HAXM ( ...

  9. Android抽象布局——include、merge 、ViewStub

    http://blog.csdn.net/xyz_lmn/article/details/14524567

  10. HTML5 is Canvas

    var cvs = document.getElementById("cvs"); // // 获取上下文环境 var con = cvs.getContext("2d& ...