js实现页面加载颜色渐变进度条

<div class="progress">
<div class="progress-val" id="bar_width">100%</div>
<div class="progress-bar">
<span class="progress-in" id="bar" style="width:0%"></span>
</div>
</div>

.progress {
width: 90%;
height: 34px;
position: relative;
margin: 10px auto;
display: inline-grid;
top: -35px;
}
.progress-val {
margin-left: 15px;

e91a
font: bold 15px/34px Helvetica, Arial, sans-serif;
color: #2368ca;
text-shadow: 0 1px rgba(255, 255, 255, 0.6);
width: 10%;
position: relative;
height: 20px;
left:78%;
top: 8px;
}
.progress-bar {
width: 90%;
display: block;
overflow: hidden;
height: 12px;
margin:0 auto;
line-height: 12px;
background: #2067c5;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent 60%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 60%);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.6);
position: relative;
}

.progress-in {
display: block;
min-width: 8px;
height: 12px;
background: #2067c5;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.2)), -webkit-linear-gradient(left, #2067c5, #24c1fc);
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.2)), -moz-linear-gradient(left, #2067c5, #24c1fc);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.2)), -o-linear-gradient(left, #2067c5, #24c1fc);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.2)), linear-gradient(to right, #2067c5, #24c1fc);
border-radius: 4px;
-webkit-box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

<script type="text/javascript">
var timer = null;
window.onload = function(){
timer = setInterval(function(){
progress();
},20)
}
function progress(){
var oDiv = document.getElementById("bar");
var bar_w = document.getElementById("bar_width");
oDiv.style.width =parseInt(oDiv.style.width) + 1 + "%";
bar_w.innerHTML = oDiv.style.width;
/*  console.log(parseInt(oDiv.style.width))*/
if(oDiv.style.width == "100%"){
clearInterval(timer);
/*window.location.href="m_index.html";*/
}
}
</script>