进度条经常运用于网页，即使我们意识到不是所有的东西都将瞬间被加载完成，这些进度条用于提醒使用者关于网页上具体的任务进程，譬如上传，下载，加载应用程序等。
以前如果想要创建一个进度条的动画效果，没有使用JavaScript是不可能实现的。然而感谢CSS3的出现，我们现在能够在div里执行动画，添加梯度和彩色元素。事实上，HTML5为实现此目的也创建了一个特殊的进度条元素。
当你看完这个教程，你将会知道怎样使用纯CSS创建一个有平面动画效果的进度条：无需Flash，无需图片，无需JavaScript。
让我们开始吧...
标签
我们应该写一个样式为.container的div用来包含我们的进度条，其次是用样式为.title的div来包裹我们的标题。
接下来，我们将添加样式为.bar的div来包含填充和未填充的进度条样式。最后，我们将在.bar里添加样式为.bar-unfill和 .bar-fill的span标签。
<div class="container">
<div class="title plain">Plain</div>
<div class="bar">
<span class="bar-unfill">
<span class="bar-fill"></span>
</span>
</div>
</div>
简单的进度条的CSS代码
.container类里将width定义为30%使进度条能够自适应。我们也将放一些简单的border-radius之类的属性在我们的.title类里以修改顶部和底部的左边的边框弧度，创建一个简单明了的平板式设计。
.container {
width:30%;
margin:0 auto
}
.title {
background:#545965;
color:#fff;
padding:15px;
float:left;
position:relative;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
border-top-left-radius:5px;
border-bottom-left-radius:5px
}
现在让我们来写未填充的的样式，首先给他一个白色的背景。
.bar-unfill {
height:15px;
display:block;
background:#fff;
width:100%;
border-radius:8px
}
接下来，我们将定义进度条的样式，先令他的宽度为100%，因为这也会应用于定义和未定义的部分。所以在我们的.bar-fill的类里，我们将令他的宽度为0作为起始的宽度，添加CSS3的transition属性使我们的动画效果更加流畅，最后，我们将添加CSS3里的animation属性，定义动画的名字，和duration和 animation-iteration-count属性。
.bar-fill {
height:15px;
display:block;
background:#45c9a5;
width:0;
border-radius:8px;
-webkit-transition:width .8s ease;
-moz-transition:width .8s ease;
transition:width .8s ease;
-webkit-animation:progressbar 7s infinite;
animation:progressbar 7s infinite
}
制作这个动画，我们将使用CSS3里的@keyframe规则来设置宽度从0变化到100%。你也能定制你自己喜欢的变化。
/* Chrome, Safari, Opera */
@-webkit-keyframes progressbar {
from {
width:0
}
to {
width:100%
}
}
/* Standard syntax */
@keyframes progressbar {
from {
width:0
}
to {
width:100%
}
}
条纹进度条
若要制作一个条纹进度条，我们应该把.bar-fill重新命名为.bar-fill-stripes。我们将使用backgrou-image属性里的 linear-gradient同时声明它的颜色。剩余的CSS3动画效果也是和上述相同，看下面的代码：
.bar-fill-stripes {
height:15px;
display:block;
background:#e74c3c;
width:0;
border-radius:8px;
background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);
-webkit-transition:width .8s ease;
-moz-transition:width .8s ease;
transition:width .8s ease;
-webkit-animation:progressbar 7s infinite;
animation:progressbar 7s infinite
}
有追踪器的进度条
本教程的这部分，我们将为我们的进度条创建一个跟踪器，所以我们将调整一下我们的HTML标签和CSS部分，观察下面的标签。
<div class="container">
<div class="title">Tracker</div>
<div class="bar">
<span class="bar-unfill">
<span class="bar-fill-tracker"></span>
<span class="track-wrap">
<span class="track"></span>
</span>
</span>
</div>
</div>
正如你所看到的那样，我们往类名为.bar-unfill的div里添加了一个类名为.track-weap的span标签。他将包裹我们整个追踪器，然后使用另一个@keyframe规则来产生动画效果，让我们一起写一下.track-wrap和.track的样式吧。
.track-wrap {
position:relative;
top:-18px;
-webkit-animation:progressbar2 7s infinite;
animation:progressbar2 7s infinite
}
.track {
height:20px;
display:block;
background:#e74c3c;
width:20px;
border-radius:10px;
position:relative;
left:-12px
}
/* Chrome, Safari, Opera */
@-webkit-keyframes progressbar2 {
from {
left:0
}
to {
left:100%
}
}
/* Standard syntax */
@keyframes progressbar2 {
from {
left:0
}
to {
left:100%
}
}
正如上面所示，我在.track-wrap类里设置了position为relative，top改为-18px，然后设置一个animation属性。接下来，我设置了追踪器的.track类，并且设置border-radius为10px，left为-12px。另一方面我也通过重新命名为progressbar2的@kyframe添加了动画效果。
HTML5 的进度条
在我们之前的例子里，我们都是使用div来创建一个进度条，但是这次我们将研究如何使用HTML5的进度条。
基础标签
HTML5进度条元素可以通过<progress>标签被添加，在这个标签里面，我们可以设置进度条的各种参数，如value、min、max等属性。请观察下面的基础标签。
<progress value="50" max="100"></progress>
现在将这些元素排成一列，我们可以用上述的便签将这些代码包裹起来，请看下面的代码。
<div class="title html5">HTML5</div>
<div class="bar">
<span class="bar-unfill">
<progress value="50" max="100"></progress>
</span>
</div>
没有什么特别之处，我们只是改变了类名为bar-fill的span标签里的进度条标签。现在让我们试试HTML5的进度条。
progress, progress::-webkit-progress-bar{
height:15px;
display:block;
background-color:#8e44ad;
width:0;
-webkit-border-radius: 8px;
border-radius:8px;
color: #fff;
-webkit-transition:width .8s ease;
-moz-transition:width .8s ease;
transition:width .8s ease;
-webkit-animation:progressbar 7s infinite;
animation:progressbar 7s infinite
}
progress::-moz-progress-bar {
height:15px;
display:block;
background-color:#8e44ad;
width:0;
-webkit-border-radius: 8px;
border-radius:8px;
color: #fff;
-webkit-transition:width .8s ease;
-moz-transition:width .8s ease;
transition:width .8s ease;
-webkit-animation:progressbar 7s infinite;
animation:progressbar 7s infinite
}
改变进度条的样式，我们需要添加Webkit和Mozilla的伪类，使谷歌浏览器和火狐浏览器兼容。
progress::-webkit-progress-bar {
/* style rules for Chrome */
}
progress::-moz-progress-bar {
/* style rules for Firefox*/
}
为了完成HTML5进度条的设计，我想出了下面的CSS。
progress::-webkit-progress-bar{
height:15px;
display:block;
background-color:#8e44ad;
width:0;
-webkit-border-radius: 8px;
border-radius:8px;
color: #fff;
-webkit-transition:width .8s ease;
-moz-transition:width .8s ease;
transition:width .8s ease;
-webkit-animation:progressbar 7s infinite;
animation:progressbar 7s infinite
}
progress::-moz-progress-bar {
height:15px;
display:block;
background-color:#8e44ad;
width:0;
-webkit-border-radius: 8px;
border-radius:8px;
color: #fff;
-webkit-transition:width .8s ease;
-moz-transition:width .8s ease;
transition:width .8s ease;
-webkit-animation:progressbar 7s infinite;
animation:progressbar 7s infinite
}
现在，使用我们第一个例子中的的@keyframe，你将得到相似的结果，如下图所示。
注意：请查看此页关于支持HTML5的进度条的浏览器。
本文根据@Sam Norton的《How to create a CSS3 progress bar》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://www.developerdrive.com/2015/05/how-to-create-a-css3-progress-bar/。
栗子酱
如需转载，烦请注明出处：http://www.w3cplus.com/css3/how-to-create-a-css3-progress-bar.html