小程序怎么写这种进度条?

Question

有没有写过这样的进度条的老铁 分享一下

Answer 1

DEMO

Answer 2

当成两个div，一个宽一个窄

Answer 3

简单点采用定位, 分为 浅色背景 、深色背景、 文本，深色背景 及文本采用定位悬浮在上方；
ps: 小程序注意替换标签

// html
<div class="wrap">
      <div class="common box1"></div>

      <div class="common box2"></div>
      <div class="text">23%</div>
   </div>

// css
 .wrap {
      position: relative;
      width: 200px;
      height: 30px;
    }
    .common {
      color: white;
      line-height: 30px;
      width: 100%;
      height: 100%;
      border-radius: 15px;
    }
    .box1 {
      background-color: rgb(239, 160, 160);
    }
    .text {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      line-height: 30px;
      text-align: center;
    }
    .box2 {
      width: 100px;
      position: absolute;
      top: 0;
      left: 0;
      background-color: red;
    }