效果：
css代码：文章来源：https://www.toymoban.com/news/detail-756049.html
.bar{
height: 14px;
width: 100%;
font-size: 10px;
margin-top: 5px;
background-color: #f5f5f5;
}
.bar::before{
display: block;
counter-reset: progress var(--precent);
content: '';
width: calc(1% * var(--precent));
color: #fff;
height: 14px;
background-color: #2486ff;
text-align: center;
white-space: nowrap;
overflow: hidden;
}
html代码：文章来源地址https://www.toymoban.com/news/detail-756049.html
<div class="bar" style="--precent:20;"></div>到了这里，关于css 纯样式实现绘出进度条的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
