使用CSS3制作一个简单的进度条(demo)

前端  /  管理员 发布于 7年前   160

这里只是一个小demo,一个用CSS3写的进度条。

如图所示：

具体代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title> new document </title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"   /><meta name="viewport" content="initial-scale=1"><style>.process-bar{    width:100px;    display:inline-block;    *zoom:1;}.pb-wrapper{    border:1px solid #cfd0d2;    position:relative;    background:#cfd0d2;    border-radius: 8px;}.pb-container{    height:12px;    position:relative;    left:-1px;    margin-right:-2px;    font:1px/0 arial;    padding:1px;}.pb-highlight{    position:absolute;    left:0;    top:0;    _top:1px;    width:100%;    opacity:0.6;    filter:alpha(opacity=60);    height:6px;    background:white;    font-size:1px;    line-height:0;    z-index:1}.pb-text{    width:100%;    position:absolute;    left:0;    top:0;    text-align:center;    font:10px/12px arial;    color:black;    font:10px/12px arial}</style></head><body>    <div class="process-bar skin-green">        <div class="pb-wrapper"><div class="pb-highlight"></div><div class="pb-container">    <div class="pb-text">50%</div>    <div class="pb-value" style="height: 100%;width: 50%;background: #19d73d;border-radius: 8px;"></div></div>        </div>    </div></body></html>

以上所述是小编给大家介绍的使用CSS3制作一个简单的进度条(demo)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！


  • 上一条：
    CSS实现鼠标上移图标旋转效果
    下一条：
    用纯CSS实现饼状Loading等待图效果

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客