学习使用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;  
}

上述border-radius属性使用inherit值，以保持和其父样式类相同的半径。

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

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

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

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