纯css进度条，简单美观实用。

css

    .card-progress-bar{
        width: 80%;
    }
    .bar{
        height: 20px;
        width: 90%;
        background-color: #D7E4EF;
    }
    .bar::before{
        display: block;
        counter-reset: progress var(--precent);
        content: counter(progress) '%';
        width: calc(1% * var(--precent));
        color: #D7E4EF;
        background-color: #4193F7;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

html：在style里给 “–precent”赋值，就能显示对应百分比。

       <div class="card-progress-bar">
          <div class="bar" style="--precent:93;"></div>
      </div>
1
2
3