我该怎么做这个进度条？

Question

Example of what I want

你好，我的问题很简单，看上图就可以了:)

我该怎么做？

如果我把背景放在进度条的部分，当进度为10%时，背景会填满10%，但我只想显示10%的背景！

也许解决办法是在100%渐变进度条上面放一个灰色进度条，但是我需要做一个"reverse" border-radius ...我觉得那是不可能的，那我怎么办可以吗？

Answer 1

Html部分

 <div id="myProgress">
  <div id="myBar">10%</div>
</div>
<button onclick='move()'>Click me</button>

Css部分

#myBar {
    width: 10%;
    height: 30px;
    background-color: #4CAF50;
    text-align: center; /* To center it horizontally (if you want) */
    line-height: 30px; /* To center it vertically */
    color: white; 
}

Javascript部分

function move() {
    var elem = document.getElementById("myBar"); 
    var width = 10;
    var id = setInterval(frame, 10);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem.style.width = width + '%'; 
            elem.innerHTML = width * 1 + '%';
        }
    }
}

Answer 2

我会为彩色条使用背景线性渐变，并将宽度设置为与进度条的宽度相同。

即 background: linear-gradient(to right, yellow, #BD3D3D 100%);

例如

.progressbar {
  background: lightgray;
  width: 300px;
  height:20px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.progressbar>.progress{
  height:20px;
  background: linear-gradient(to right, yellow, #BD3D3D 300px);
  border-radius: 10px;
}

/* set some custom progresses */

.progressbar:nth-child(1)>.progress{
  width: 25%;
}
.progressbar:nth-child(2)>.progress{
  width: 50%;
}
.progressbar:nth-child(3)>.progress{
  width: 100%;
}

<div class="progressbar"><div class="progress"></div></div>
<div class="progressbar"><div class="progress"></div></div>
<div class="progressbar"><div class="progress"></div></div>

我该怎么做这个进度条？

How I can do this progress bar?

html

css

progress