进度条常常运用于网页，即便咱们意识到不是全部的东西都将瞬间被加载完成，这些进度条用于提醒使用者关于网页上具体的任务进程，譬如上传，下载，加载应用程序等。css
之前若是想要建立一个进度条的动画效果，没有使用JavaScript是不可能实现的。然而感谢CSS3的出现，咱们如今可以在div里执行动画，添加梯度和彩色元素。事实上，HTML5为实现此目的也建立了一个特殊的进度条元素。 当你看完这个教程，你将会知道怎样使用纯CSS建立一个有平面动画效果的进度条：无需Flash，无需图片，无需JavaScript。html
让咱们开始吧...html5
咱们应该写一个样式为.container的div用来包含咱们的进度条，其次是用样式为.title的div来包裹咱们的标题。css3
接下来，咱们将添加样式为.bar的div来包含填充和未填充的进度条样式。最后，咱们将在.bar里添加样式为.bar-unfill 和 .bar-fill 的span标签。web
<div class="container"> <div class="title plain">Plain</div> <div class="bar"> <span class="bar-unfill"> <span class="bar-fill"></span> </span> </div> </div>
.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 }
如今让咱们来写未填充的的样式，首先给他一个白色的背景。ruby
.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%。你也能定制你本身喜欢的变化。spa
/* 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添加了动画效果。
在咱们以前的例子里，咱们都是使用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;