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>