CSS3+jQuery制作动态百分比数字显示进度条-Web前端(W3Cways.com)

今天分享一个利用css3制作动态进度条以及附加jQuery百分比数字显示。其效果对比flash来说却毫不逊色，有一个精致的动画进度条，上面还有当前进度的百分比数字显示，而且还会跟着进度条而移动。相信追求新颖的朋友来说一定会非常的喜欢。

HTML Code

<div class="wrapper">
  <div class="load-bar">
    <div class="load-bar-inner" data-loading="0"> <span id="counter"></span> </div>
  </div>
  <h1>页面加载中</h1>
  <p>请稍候...</p>
</div>

CSS Code

这里主要运用了CSS3的linear-gradient的渐变属性、border-radius的圆角属性、box-shadow的阴影属性等等，来制作出进度条的初步模型。完成进度条的模型后我们利用animation属性，让进度条开始动起来，就其中的进度条动画设置代码如下：

.load-bar-inner {
	height: 99%;
	width: 0%;
	border-radius: inherit;
	position: relative;
	background: #c2d7ac;
	background: linear-gradient(#e0f6c8, #98ad84);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),  0 1px 5px rgba(0, 0, 0, 0.3),  0 4px 5px rgba(0, 0, 0, 0.3);
	animation: loader 10s linear infinite;
}

如果接触了CSS3的朋友，相信大多数人对这个属性都比较熟悉了，在这里大概的说明一下animation设置的参数：

设置对象所应用的动画名称：loader
设置对象动画的持续时间：10s
设置对象动画的过渡类型：linear （线性过渡，等同于贝塞尔曲线）
设置对象动画的循环次数：infinite （无限循环）

@keyframes loader这个标签属性是用来被animation使用的，定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：

@keyframes loader {
 from {
width: 0%;
}
to {
width: 100%;
}
}

下面是完整的CSS代码，大家可以多研究下，也可以自己修改其中的代码，看看是否制作出更加有趣的东西来：

.wrapper {
	width: 350px;
	margin: 200px auto;
        text-align:center;
}
.wrapper p a {color:#757575; text-decoration:none;}
.wrapper .load-bar {
	width: 100%;
	height: 25px;
	border-radius: 30px;
	background: #dcdbd7;
	position: relative;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8),  inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
.wrapper .load-bar:hover .load-bar-inner, .wrapper .load-bar:hover #counter {
	animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
	-webkit-animation-play-state: paused;
}
.wrapper .load-bar-inner {
	height: 99%;
	width: 0%;
	border-radius: inherit;
	position: relative;
	background: #c2d7ac;
	background: linear-gradient(#e0f6c8, #98ad84);
	background: -moz-linear-gradient(#e0f6c8, #98ad84);
	background: -webkit-linear-gradient(#e0f6c8, #98ad84);
	background: -o-linear-gradient(#e0f6c8, #98ad84);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),  0 1px 5px rgba(0, 0, 0, 0.3),  0 4px 5px rgba(0, 0, 0, 0.3);
	animation: loader 10s linear infinite;
	-moz-animation: loader 10s linear infinite;
	-webkit-animation: loader 10s linear infinite;
	-o-animation: loader 10s linear infinite;
}
.wrapper #counter {
	position: absolute;
	background: #eeeff3;
	background: linear-gradient(#eeeff3, #cbcbd3);
	background: -moz-linear-gradient(#eeeff3, #cbcbd3);
	background: -webkit-linear-gradient(#eeeff3, #cbcbd3);
	background: -o-linear-gradient(#eeeff3, #cbcbd3);
	padding: 5px 10px;
	border-radius: 0.4em;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),  0 2px 4px 1px rgba(0, 0, 0, 0.2),  0 1px 3px 1px rgba(0, 0, 0, 0.1);
	left: -25px;
	top: -50px;
	font-size: 12px;
	font-weight: bold;
	width: 44px;
	animation: counter 10s linear infinite;
	-moz-animation: counter 10s linear infinite;
	-webkit-animation: counter 10s linear infinite;
	-o-animation: counter 10s linear infinite;
}
.wrapper #counter:after {
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	background: #cbcbd3;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	left: 50%;
	margin-left: -4px;
	bottom: -4px;
	box-shadow:  3px 3px 4px rgba(0, 0, 0, 0.2),  1px 1px 1px 1px rgba(0, 0, 0, 0.1);
	border-radius: 0 0 3px 0;
}
.wrapper h1 {
	font-size: 28px;
	padding: 20px 0 8px 0;
}
.wrapper p {
	font-size: 13px;
}
 @keyframes loader {
 from {
width: 0%;
}
to {
	width: 100%;
}
}
 @-moz-keyframes loader {
 from {
width: 0%;
}
to {
	width: 100%;
}
}
 @-webkit-keyframes loader {
 from {
width: 0%;
}
to {
	width: 100%;
}
}
 @-o-keyframes loader {
 from {
width: 0%;
}
to {
	width: 100%;
}
}

 @keyframes counter {
 from {
left: -25px;
}
to {
	left: 323px;
}
}
 @-moz-keyframes counter {
 from {
left: -25px;
}
to {
	left: 323px;
}
}
 @-webkit-keyframes counter {
 from {
left: -25px;
}
to {
	left: 323px;
}
}
 @-o-keyframes counter {
 from {
left: -25px;
}
to {
	left: 323px;
}
}

在这里其实有很多个CSS3的知识点，例如进度条上面的进度提示的小图标的下方有个小三角形，这个小三角主要是通过制作一个小的正方形，然后利用position来定位，调整好位置后，再通过transform来转换角度，使之最终成为一个三角形。大家可以多多看看里面的一些小细节，对于学习CSS3来说是很有帮助的。

jQuery Code

首先引入jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.2" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  
  var interval = setInterval(increment,100);
  var current = 0;

  function increment(){
    current++;
    $('#counter').html(current+'%'); 
    if(current == 100) { current = 0; }
  }
  
  $('.load-bar').mouseover(function(){
    	clearInterval(interval);
  }).mouseout(function(){
      interval = setInterval(increment,100);
 	});

});
</script>

Demo