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 {
      height: 20px; width: 300px;
      background-color: #f2f2f2;
  }
  .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: #2486ff;
      text-align: right;
      white-space: nowrap;
      overflow: hidden;
  }