|
进度条是基础的界面控件，可用于多种场合，比如任务完成进度，手机充电状态等。 本文介绍一个简单实用的进度条制作方法。预期效果如下图所示： 
直观上，我们可以把该进度条控件分为2个部分，外部的边界用来表示固定的目标范围，里面的条形部分用来表示当前进度。 外部目标范围元素的CSS代码编写如下： 1 2 3 4 5 6 7 8 9 10 11 | .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%;
}
|
内部条形元素边界的弧度需要和外部范围元素的保持一致，可以使用继承的方式： 1 2 3 4 5 6 7 | .pb-scope .pb-bar {
display: block;
width: 70%;
height: 100%;
border-radius: inherit;
background: #A157FC;
}
|
上述border-radius属性使用inherit值，以保持和其父样式类相同的半径。 具体使用时的HTML代码示例如下： 1 2 3 | <span class="pb-glass">
<span class="pb-bar"></span>
</span>
|
如果需要显示进度条动画，只要给内部bar元素添加animation即可。 一个完整的在线实例可以访问：http://wow./fiddle/17885
|
