使用CSS实现进度条

来源：互联网发布：美国最新航母数据编辑：程序博客网时间：2024/06/05 06:37

效果图：

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标签中的文字改为进度

0 0