calc()和CSS变量和进度条效果实例页面

展示

代码

• 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>

• CSS：

  .bar {
      line-height: 20px;
      background-color: #eee;
  }
  .bar::before {
      counter-reset: progress var(--percent);
      content: counter(progress) "%\2002";
      display: block;
      width: calc(100% * var(--percent) / 100);
      font-size: 12px;
      color: #fff;
      background-color: deepskyblue;
      text-align: right;
      white-space: nowrap;
      overflow: hidden;
  }