CSS变量与上传进度条demo实例页面

效果：

图片1：

图片2：

图片3：

代码：

CSS代码：

.bar {
    height: 20px; width: 300px;
    background-color: #f5f5f5;
    margin: 5px 0 10px;
}
.bar::before {
    counter-reset: progress var(--percent);
    content: counter(progress) '%\2002';
    display: block;
    width: calc(300px * var(--percent) / 100);
    font-size: 12px;
    color: #fff;
    background-color: #2486ff;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

HTML代码：

<label>图片1：</label>
<div class="bar" style="--percent: 60;"></div>
<label>图片2：</label>
<div class="bar" style="--percent: 40;"></div>
<label>图片3：</label>
<div class="bar" style="--percent: 20;"></div>