使用CSS实现进度条

最新推荐文章于 2025-01-29 10:46:22 发布

原创最新推荐文章于 2025-01-29 10:46:22 发布 · 1.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用CSS实现的可定制颜色与进度的进度条样式。通过不同的类名可以轻松实现绿色、红色和蓝色三种不同风格的进度条，并且能够通过修改HTML中的宽度属性来显示不同的进度。

效果图：

CSS代码：

.progress{
    width: 292px;
    height: 16px;
    position: relative;
    margin-top: 20px;
}
.progressBar{
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: 1px solid;
    position: absolute;
    left: 0px;
    overflow: hidden;
}
.progress span{
    position: absolute;
    left: 300px;
}
.progressWidth{
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px; 
}
.redProress .progressBar{
    border: 1px solid #fe92a2;
}
.redProress{
    color: #fe92a2;
}
.redProress .progressWidth{
    background-color: #fe92a2;
}
.greenProress .progressBar{
    border: 1px solid #abd474;
}
.greenProress{
    color: #abd474;
}
.greenProress .progressWidth{
    background-color: #abd474;
}
.blueProress .progressBar{
    border: 1px solid #7babeb;
}
.blueProress{
    color: #7babeb;
}
.blueProress .progressWidth{
    background-color: #7babeb;
}

html使用：

绿色：

<div class="progress greenProress">
    <div class="progressBar">
        <div class="progressWidth" style="width:20%;"></div>
    </div>
    <span>20%</span>
</div>

红色：

<div class="progress redProress">
    <div class="progressBar">
        <div class="progressWidth" style="width:40%;"></div>
    </div>
    <span>40%</span>
</div>

蓝色：

<div class="progress blueProress">
    <div class="progressBar">
        <div class="progressWidth" style="width:60%;"></div>
    </div>
    <span>60%</span>
</div>

显示相应的进度：将 .progressWidth的宽度以及span标签中的文字改为进度