学习使用CSS做进度条

进度条是基础的界面控件，可用于多种场合，比如任务完成进度，手机充电状态等。

本文介绍一个简单实用的进度条制作方法。预期效果如下图所示：

直观上，我们可以把该进度条控件分为2个部分，外部的边界用来表示固定的目标范围，里面的条形部分用来表示当前进度。

外部目标范围元素的CSS代码编写如下：

.pb-scope {
    display: inline-block;
    width: 100px;
    height: 20px;
    padding: 2px;
    border: 4px solid #A157FC;
    border-top-left-radius: 10% 50%;
    border-top-right-radius: 10% 50%;
    border-bottom-left-radius: 10% 50%;
    border-bottom-right-radius: 10% 50%;
}

内部条形元素边界的弧度需要和外部范围元素的保持一致，可以使用继承的方式：

.pb-scope .pb-bar {
    display: block;
    width: 70%;
    height: 100%;
    border-radius: inherit;
    background: #A157FC;
}

具体使用时的HTML代码示例如下：

<span class="pb-glass"><span class="pb-bar"></span></span>

如果需要显示进度条动画，只要给内部bar元素添加animation即可。

一个完整的在线实例可以访问：http://wow.techbrood.com/fiddle/17885

by iefreer