原生：后台返值，动态改变进度条颜色

style:

/* 对进度条的容器进行样式渲染，利用CSS3的渐变属性来实现不同进度变换颜色的效果： */
    .loader-container {
            height: 16px;
            padding : 10px;
            border-radius: 10px;
            background-color: transparent;
            background-image: -webkit-linear-gradient(left, #5bd8ff, #ff0000);
            background-image: -moz-linear-gradient(left, #5bd8ff, #ff0000);
            background-image: -o-linear-gradient(left, #5bd8ff, #ff0000);
            background-image: -ms-linear-gradient(left, #5bd8ff, #ff0000);
            background-image: linear-gradient(left, #5bd8ff, #ff0000);
            box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.4);
        }
/* 数字百分比的样式属性，这里随着进度变化，数字百分比的颜色也会发生变化。 */
.meter {
        font-size: 1.6em;
        text-align: right;
        color: #ff0000;
        animation: meter 10s linear;
        text-shadow: 0 -1px 0 #333333;
    }
    .meter:after {
        content: "%";
    }

html:

 <!-- 构造一个进度条容器和数字百分比容器： -->
        <div class="speed ">
            <div id="bar" class="loader-container"></div>
            <div id="met" class="meter">{$num}</div>
            <div style="display:none">{$num}</div>
        </div>

js:

<!-- JS代码，其实js要完成的工作非常简单，只需要将CSS3渲染好的进度条动起来就好 -->
<script>
    var bar=document.getElementById('bar')
        bar.style.width = '{$num}'*9+'%';
    var met=document.getElementById('met')
        met.innerHTML = '{$num}'*9;
  </script>