svg timeline animation (buggy)

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="timeline">
      <div class="col"><h4>1. Something</h4><div class="completed"></div></div>
      <div class="col"><h4>2. Anything</h4><div class="completed"></div></div>
      <div class="col"><h4>3. Other</h4><div class="completed"></div></div>
      <div class="col col-last"><h4>4. Finally</h4><div class="completed"></div></div>
    </div>
  </body>

</html>

// Code goes here

window.onload = function() {
  var completed = document.getElementsByClassName('completed');
  var myInterval = setInterval(function(){timelineAnim(timelineIndex++)},1000);
  var timelineIndex = 0;
  var timelineAnim = function(index) {
		completed[index].className = completed[index].className + " true"; 
    if (timelineIndex===4) clearInterval(myInterval);
	}
}

/* Styles go here */

.timeline h4 {
  margin:0;
  margin-left:60px; 
}  

.timeline .col {
  background:url(timeline_v.svg) 30px 0 no-repeat;
	min-height: 80px;
	position: relative;
	margin:0;
}  

.timeline .col .completed.true  {
    width= 300px;
		background:url(timeline_v_completed.svg) 30px 0 no-repeat;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	left: 0;
	}

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
	 width="24px" height="90px" viewBox="0 0 24 90" enable-background="new 0 0 24 90">
<rect x="9.5" y="21.999" fill="#C4C4BA" width="5" height="68"/>
<circle fill="none" stroke="#C4C4BA" stroke-width="4" stroke-miterlimit="10" cx="12" cy="12" r="10"/>
</svg>

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px" height="90px" viewBox="0 0 24 90" enable-background="new 0 0 24 90">
<rect x="9.5" y="22" fill="#9e9e8e" width="5" height="70">
	<animate attributeName="height" attributeType="XML"
	    fill="freeze"
	    values="0;70"
	    begin="0s" dur="1s"
	    />
</rect>
<circle fill="#9e9e8e" cx="12" cy="12" r="12"/>
</svg>