我该如何做这个进度条？

Question

Example of what I want

嗨，我的问题很简单，只要看看上面:)

的PIC我怎么能这样做？

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

也许解决方法是在100％渐变进度条上方放置一个灰色进度条，但我需要制作一个“反向”边框半径......我认为这是不可能的，所以我该如何做到这一点？

Answer 1

我会使用一个背景和基础d线性渐变，并将宽度设置为与进度条的宽度相同。

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

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