蓝戒的博客


网页顶部页面加载线性进度条js及css3实现方法

网页顶部加载进度条仿智能手机上浏览网页一样,手机上的浏览器进度条一般都在屏幕顶部,一条极细的小线条,当页面加载的时候,它就不断的加载显示进度。这样做的目的与页面中加载提示及软件应用中的进度提示的目的都是一致的为了优化用户体验。

首先介绍一下css3的实现方法:

<style type="text/css">
body{ margin:0; padding:0;}
@-moz-keyframes progressing {
0% {width:0px;}
100% {width:100%;}
}
@-webkit-keyframes progressing {
0% {width:0px;}
100% {width:100%;}
}
.progress {width:100%; height:5px; overflow:hidden; background-color:#27ccc0; position:fixed; top:0; left:0; z-index:9; -moz-animation:progressing 2s ease-out; -webkit-animation:progressing 2s ease-out;}
</style>

<div  class="progress"></div>

再看一下jquery的实现方法:

<div id="loading">
<div id="bar"></div>
</div>
<script src="http://libs.useso.com/js/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
S("#loading div").animate({width:"100%"},800,function(){
setTimeout(function(){
$("#bar").fadeOut(500);
});
});
});
</script>

上面的css3动画属性存在浏览器兼容问题,而jquery的方法代码调用又不是很方便,所以推荐以下js插件:
插件一:NProgress.js

官方地址:http://ricostacruz.com/nprogress/

github地址:https://github.com/rstacruz/nprogress

插件使用方法:

1. 页面头部引入:
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

2. 添加回调进度条控件

<script>
NProgress.start();
NProgress.done();
</script>

3. 提供设计进度百分比api

NProgress.set(0.0); // 等同于 .start() 方法
NProgress.set(0.4);
NProgress.set(1.0); // 等同于 .done() 方法

.inc()
增加:增加进度栏,只是利用.inc()。这是一个随机量的增量。这将永远不会到100%:使用它为每一个图像负载(或类似)。
NProgress.inc();

如果你想通过特定的值递增,你可以用这个参数传递:
NProgress.inc(0.2);

更改进度开始时使用的最小百分比。(默认:0.08)
NProgress.configure({ minimum: 0.1 });

您可以使用模板更改标记。保持进度条的工作,role='bar' 的元素。查看默认模板以供参考。
NProgress.configure({
template: "

...

"
});

利用animation 调整动画设置(CSS的easing 字符串)和速度(毫秒)。(默认:ease and 200)
NProgress.configure({ easing: 'ease', speed: 500 });

关闭自动递增的事件设置为false。(默认情况:true)
NProgress.configure({ trickle: false });

调整递增进度和递增速度
NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });

指定要更改的父容器。(默认:body)
NProgress.configure({ parent: '#container' });

插件二:LoadingBar.js

这是一款仿照Youtube网站上的ajax加载进度条特效插件。该加载进度条特效共有5种效果,每种效果都是通过ajax回调来增长进度条的刻度。

LoadingBar.js下载地址:

http://www.onextrapixel.com/2013/09/02/loadingbar-js-adding-a-youtube-like-loading-bar-to-your-website/

本文固定链接: http://www.webzsky.com/?p=771 | 蓝戒的博客

cywcd
该日志由 cywcd 于2015年12月28日发表在 css, javascript, Jquery, xhtml+css 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 网页顶部页面加载线性进度条js及css3实现方法 | 蓝戒的博客
关键字:

网页顶部页面加载线性进度条js及css3实现方法:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter
来自的朋友,欢迎您 点击这里 订阅我的博客 o(∩_∩)o~~~
×