Html 我怎样才能做到这个进度条？

您好，我的问题很简单，请看上图：

我怎么能做到

如果我在进度栏的进度部分放置背景，当进度为10%时，背景将填充所有的10%，但我只想显示10%的背景

也许解决方案是在100%渐变进度条上方放置一个灰色进度条，但我需要制作一个反向边界半径。。。我认为这是不可能的，那么我如何才能做到呢？

Html部分

Javascript部分

---

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

i、 背景：向右线性梯度，黄色，BD3D3D 100%

e、 g

.progressbar{ 背景：浅灰色； 宽度：300px； 高度：20px； 边界半径：10px； 边缘底部：10px； } .progressbar>.progress{ 高度：20px； 背景：右线性渐变，黄色，BD3D300px； 边界半径：10px； } /*设置一些自定义进程*/ .progressbar:nth-child1>.progress{ 宽度：25%； } .progressbar:nth-child2>.progress{ 宽度：50%； } .progressbar:nth-child3>.progress{ 宽度：100%； }

---

@RogerNg的副本我不同意它是副本。。。这里没有提到引导进度条。你可以在这里添加你的代码并寻求帮助，而不仅仅是试图从SO社区获取复制粘贴代码。我在@NickGrealy的回答下面的评论部分看到，你一直说它不起作用。他根据你的问题给出了答案，他花时间为你编写了代码部分。如果它不起作用，那么就对代码进行处理，使其起作用。你没有说谢谢你的时间这就是为什么社区需要停止回答这些问题的原因。首先，这是我第一次上电视，所以如果问问题的方式不对，我很抱歉。其次，我英语说得不好，所以我画了一张图，因为它更容易让我的朋友解释我需要什么。你说了，你没有说谢谢，但我对NickGrealy的帖子的第一个评论是谢谢。然后我问他一些更新，因为这不是我想要的，但很接近。对不起，这不是我需要的。看看屏幕：我希望进度条显示与背景渐变相同的百分比。例如，如果进度条是10%，我只想显示10%的渐变，只有黄色，而不是红色。其实我用的是标准进度条谢谢！在px中，可以用%而不是固定宽度来做同样的事情？@Vald-我根据要求将示例更改为使用百分比。但我希望整个条形图都是响应的。progressbar{width:100%；}如果我将进度条和渐变设置为100%，它将不起作用：确定它能起作用。。。你是说这个吗？->BD3D3D 100%示例更新DI mean.progressbar{width:100%}而不是固定的300px宽度，以使进度条响应

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

#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; 
}

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 + '%';
        }
    }
}