学习使用CSS制作进度条

techbrood 发表于 2016-10-07 16:24:23

标签: css3, progress, bar

- +

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

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

下载.png

直观上,我们可以把该进度条控件分为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


possitive(10) views8211 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章