用 jQuery nprogress.js 为你的web 加上加载动画吧

2553


jQuery nprogress.js页面加载进度条 参考地址:http://www.jq22.com/jquery-info4121

下面是调用方法的说明,打开Index.html页面直接可以看效果

NProgress.start() ? 显示进度条
NProgress.set(0.4) ? 设置百分比
NProgress.inc() ? 一个小增量
NProgress.done() ? 完成进度
配置插件
通过 minimum 来修改最小百分比。
NProgress.configure({ minimum: 0.1 });
你可以通过 template 修改标记结构。为了保证进度条正常工作,需要一个包含 role='bar' 属性的元素。
NProgress.configure({
  template: "..."});
通过 ease(一个 CSS 中的 easing 值) 调整动画设置和速度 speed (毫秒ms)。
NProgress.configure({ ease: 'ease', speed: 500 });
想关闭进度条步进?设置 trickle 为 false。
NProgress.configure({ trickle: false });
你可以调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔,单位毫秒ms).
NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });
想禁用进度环?设置 showSpinner 为 false。
NProgress.configure({ showSpinner: false });


下面是演示例子:由于不需要进度条的效果 修改了ccs 以及 js 插件一点地方:

参考地址:http://test2.usezan.com/

<link rel="stylesheet" href="__JS__plug/nprogress/nprogress.css">

<script src="__JS__plug/nprogress/nprogress.js"></script>

<script type="text/javascript">

    NProgress.start();

    $(window).load(function(){

        NProgress.done();

    })

</script>

玄玄博客:http://www.blogxuan.com/

环企优站官网:http://www.usezan.com/