Question

嗨，我的问题很简单，只需看看上面的图片：）

我怎么能这样做？

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

也许解决方案是在100％渐变进度条上方放置一个灰色进度条，但我需要做一个＆＃34;反向＆＃34; 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%);

<强> e.g。

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

我怎么能做这个进度吧？

2 个答案: