load indicator - HTML SVG

by p_russell

HTML

<div class="outerContainer">
  <div class="container">
    <div id="indicator">
		
<!-- 	      <svg id="SVG" >	 -->
       <svg id="SVG" xmlns="http://www.w3.org/2000/svg">
        <rect id = "indicatorLevel" fill="#F1C40F" x="0" y="0" width="1000" height="100" />      -->        
<!-- 					<rect id = "indicatorLevel" fill="#F1C40F" /> -->
       </svg>
    </div>
  </div>
</div>

CSS

body {
  background-color: green;
}

.outerContainer {
  position: relative;
  width: 200px;
  height: 5.4rem;
  background-color: red;
}

.container {
  position: relative;
  width: 100px;
  height: 5.4rem;
  background-color: blue;
}

#indicator {
  /*   border: 1px solid black;
  position: absolute;
  top: 0;  left: 0; */
  width: 8%;
  height: 100%;
  background-color: #000;
}

JavaScript

var indicator = document.getElementById("indicator");
var indicatorLevel = document.getElementById("indicatorLevel");
var indicatorSVG = document.getElementById("SVG");

indicatorLevel.style.fill = '#F1C40F';
/* indicatorLevel.style.height = '0'; */
// indicator.style.height = "50%";
var indicatorHeight = indicator.clientHeight;
var indicatorOffset =-100 ; //indicator.clientHeight;
//console.log("inidcator height = " + indicatorHeight);
var indicatorWidth = indicator.clientWidth;
//console.log("inidcator width = " + indicatorWidth);
indicatorSVG.setAttributeNS( null ,  "viewBox", "0 " + indicatorOffset + " " + indicatorWidth + " " + indicatorHeight);
// indicatorLevel.style.width = indicatorWidth;
indicatorLevel.style.height = "100%"; 
var count = -indicatorHeight;
var countUp = setInterval(updateClocks, 1000);
var increment = indicatorHeight / 20;
function updateClocks() {
	indicatorSVG.setAttributeNS( null , "viewBox", "0 " + count + " " + indicatorWidth + " " + indicatorHeight);
	count = count + increment;
  if (count > 0) count = -indicatorHeight;
}