css 简单进度显示条

效果图

HTML:

<div class="bar">
    <div class="blue percent" style="width: 27.61%"></div>
</div>

CSS:

.content .question-box .question .answer-table td .bar {
    display: inline-block;
    width: 142px;
    height: 12px;
    margin: 0 0 0 3px;
    padding: 0;
    background: #e7e7e7;
    border-radius: 20px;
    box-sizing: border-box;
}

.content .question-box .question .answer-table td .bar .blue {
    display: block;
    height: 100%;
    margin: 0;
    padding: 0;
    border-radius: 20px;
    background: #3498db;
}

.content .question-box .question .answer-table td .bar .percent {
    overflow: hidden;
}

猜你喜欢

转载自blog.csdn.net/jpjp2020/article/details/80894347