我該如何做這個進度條？

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