如何创建一个颜色根据百分比变化的进度条答案

【问题标题】：How to create a progress bar that the color change according to percentation如何创建一个颜色根据百分比变化的进度条
【发布时间】：2018-02-21 13:31:33
【问题描述】：

如何创建一个颜色根据百分比变化的进度条我想根据给定的值（js & css）改变条形的颜色以平滑变化

例如：0% = 绿色，100% = 红色，75% = 橙色（红色和绿色之间的渐变） 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 中的这段代码：

<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 percent 是 div 输出值

【问题讨论】：

标签： javascript php html css

【解决方案1】：

你可以做纯 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>

【讨论】：