Не понимаю, зачем столько JavaScript кода.
<style>
#bar {
position: absolute;
top: 0;
left: 0;
height: 3px;
background: red;
box-sizing: border-box;
-webkit-box-shadow: 1px 1px 6px 0px #333;
-moz-box-shadow: 1px 1px 6px 0px #333;
box-shadow: 1px 1px 6px 0px #333;
-o-transition: 1s width ease;
-ms-transition: 1s width ease;
-moz-transition: 1s width ease;
-webkit-transition: 1s width ease;
transition: 1s width ease;
width: 0;
}
</style>
<div id="bar" class="zero-width"></div>
<button onclick="document.getElementById('bar').style.width='30%';">(30)</button>
<button onclick="document.getElementById('bar').style.width='60%';">(60)</button>
<button onclick="document.getElementById('bar').style.width='100%';">(100)</button>