如何創建顏色根據百分比變化的進度條

如何創建顏色根據百分比更改的進度條我想根據給定的值來更改顏色條的顏色以平滑更改（js & css）如何創建顏色根據百分比變化的進度條

例如：

<style> 
#myBar { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background-color: #ff0000; 
    text-align: center; 
    line-height: 30px; 
    color: white; 
    border-radius: 1em; 
    animation: color 2s linear 0s alternate; 
} 

@keyframes color{ 
    0% {background-color: #0f0;} 
    50% {background-color: #ff0;} 
    100% {background-color: #f00;} 
} 
</style>

該代碼在index.php文件：

0％=綠色，100％=紅色，75％=橙該代碼在CSS（紅色和綠色之間的梯度）

<script> 
function move() { 
    var elem = document.getElementById("myBar"); 
    var newElem = document.getElementById("percent"); 
    var height = 1; 
    score = <?php echo($percentation);?>; 
    var id = setInterval(frame, 25); 

    function frame() { 
     if (height >= score) { 
      clearInterval(id); 
     } else { 
      height++; 
      elem.style.height = height + '%'; 
      newElem.innerHTML = height + '%'; 
     } 
    } 
} 
</script>

myBar是承重橫條本身的DIV ％的是DIV輸出值

來源

2017-09-13 Chitoge Kirisaki

你可以做純CSS。下面是一個例子

.progressBar { 
 
    background-color: lightgrey; 
 
    width: 200px; 
 
    height: 20px; 
 
    
 
} 
 

 

 
.progress { 
 
    width: 10%; 
 
    height: 100%; 
 
    background-color: blue; 
 
    animation: color 5s linear 0s alternate; 
 
} 
 

 
@keyframes color{ 
 
    10% { 
 
    background-color: #0f0; 
 
    width: 20%;/*At 10%, change the width to 20%*/ 
 
    } 
 
    40% { 
 
    background-color: #ff0; 
 
    width: 40%; 
 
    } 
 
    70% { 
 
    background-color: #f00; 
 
    width: 60%; 
 
    } 
 
    100% { 
 
    background-color: #fff; 
 
    width: 100%; 
 
    } 
 
}

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

什麼想法？您可以通過關鍵幀更改寬度或高度。

下面是一個使用像你問的高度的例子。

.progressBar { 
 
    background-color: lightgrey; 
 
    width: 20px; 
 
    height: 200px; 
 
    
 
} 
 

 

 
.progress { 
 
    width: 100%; 
 
    height: 10%; 
 
    background-color: blue; 
 
    animation: color 5s linear 0s alternate; 
 
} 
 

 
@keyframes color{ 
 
    10% { 
 
    background-color: #0f0; 
 
    height: 20%;/*At 10%, change the height to 20%*/ 
 
    } 
 
    40% { 
 
    background-color: #ff0; 
 
    height: 40%; 
 
    } 
 
    70% { 
 
    background-color: #f00; 
 
    height: 60%; 
 
    } 
 
    100% { 
 
    background-color: #fff; 
 
    height: 100%; 
 
    } 
 
}

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

來源

2017-09-13 01:57:56 HTMLNoob

如何創建顏色根據百分比變化的進度條

回答

相關問題