Progress Bar without nested divs... for every element where the css linear-gradient works.
Here the JSFiddle http://jsfiddle.net/oj1L3y6t/2/
function show_progress(i) {_x000D_
var progress1 = i;_x000D_
var progress2 = progress1 + 1;_x000D_
var progress3 = progress1 + 2;_x000D_
_x000D_
var magic = "linear-gradient(to right, #FFC2CE " + progress1 + "% ,red " + progress2 + "% , #FFFFFF " + progress3 + "%)";_x000D_
document.getElementById("progress-0").style.background = magic;_x000D_
_x000D_
var magic = "linear-gradient(to right, lightblue " + progress1 + "% , lightgreen " + progress2 + "%)";_x000D_
document.getElementById("progress-1").style.background = magic;_x000D_
_x000D_
var magic = "linear-gradient(to right, lightblue " + progress1 + "% , #FFFFFF 100%)";_x000D_
document.getElementById("progress-2").style.background = magic;_x000D_
_x000D_
var magic = "linear-gradient(#FFC2CE " + progress1 + "% ,red " + progress2 + "% , #FFFFFF " + progress3 + "%)";_x000D_
document.getElementById("progress-3").style.background = magic;_x000D_
}_x000D_
_x000D_
function timeout() {_x000D_
t = setTimeout(function() {_x000D_
show_progress(t)_x000D_
timeout();_x000D_
}, 50);_x000D_
if (t == 78) {_x000D_
clearTimeout(t);_x000D_
}_x000D_
console.log(t);_x000D_
}_x000D_
_x000D_
timeout();
_x000D_
#progress-0 {_x000D_
border: 1px solid black;_x000D_
width: 500px;_x000D_
background: #999;_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
#progress-1 {_x000D_
border: 1px solid black;_x000D_
width: 500px;_x000D_
background: #999;_x000D_
text-align: center;_x000D_
margin-top: 10px;_x000D_
border-radius: 10px;_x000D_
}_x000D_
_x000D_
#progress-2 {_x000D_
border: 1px solid black;_x000D_
width: 500px;_x000D_
background: #999;_x000D_
text-align: center;_x000D_
margin-top: 10px;_x000D_
}_x000D_
_x000D_
#progress-3 {_x000D_
border: 1px solid black;_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
background: #999;_x000D_
line-height: 100px;_x000D_
text-align: center;_x000D_
margin-top: 10px;_x000D_
border-radius: 200px;_x000D_
}
_x000D_
<div id="progress-0">Loading</div>_x000D_
<input id="progress-1" value="Loading"></input>_x000D_
<button id="progress-2">Loading</button>_x000D_
<p id="progress-3">Loading</p>
_x000D_