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

【问题标题】：How I can do this progress bar?我怎样才能做到这个进度条？
【发布时间】：2018-02-08 21:18:44
【问题描述】：

Example of what I want

你好，我的问题很简单，看看上面的图片：)

我该怎么做？

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

也许解决方案是在 100% 渐变进度条上方放置一个灰色进度条，但我需要制作一个“反向”边框半径......我认为这是不可能的，那么我该怎么做呢？

【问题讨论】：

重复stackoverflow.com/questions/29519868/…
@RogerNg 我不同意它是重复的......没有提到“引导进度条”。
您可以在此处添加您的代码并寻求帮助，而不仅仅是尝试从 SO 社区获取复制粘贴代码。我在@NickGrealy 的答案下的评论部分看到你一直说它不起作用。他根据您的问题给出了答案，他花时间为您编写了该代码部分。如果它不起作用，则处理该代码以使其正常工作。你没有说谢谢你的时间，这就是为什么 SO 社区需要停止回答这些类型的问题。
首先，这是我第一次参加 SO，如果这不是正确的提问方式，我很抱歉。接下来，我英语说得不好，所以我拍了一张照片，因为这样更容易解释我需要什么。你说“你没有说谢谢”，但我对 NickGrealy 的帖子的第一条评论是“谢谢”。然后我问他一些更新，因为这不是我想要的，但它已经接近了。

标签： html css progress

【解决方案1】：

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

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

【讨论】：

谢谢！可以用 % 而不是 px 中的固定宽度来做同样的事情吗？
@Vald - 我根据要求将示例更改为使用百分比。
但是如果我将进度条和渐变设置为 100%，我希望整个栏是响应式的 (.progressbar{width:100%;})，它不起作用:(跨度>
当然可以……你是说这个吗？ -> #BD3D3D 100%（示例更新）
我的意思是 .progressbar{width:100%} 而不是固定的 300px 宽度，以使进度条响应

【解决方案2】：

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

【讨论】：

抱歉，这不是我需要的。看屏幕：我希望进度条显示与背景渐变相同的百分比。例如，如果进度条是 10%，我只想显示 10% 的渐变（只有黄色，而不是红色）。实际上我使用标准进度条