load indicator - HTML SVG VUE

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"
			 viewBox=" 0 -50 8 86" 			 >
        <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");

var indicatorHeight = indicator.clientHeight;
var indicatorOffset =-100 ; //indicator.clientHeight;
//console.log("inidcator height = " + indicatorHeight);
var indicatorWidth = indicator.clientWidth;
//indicatorLevel.style.height = "100%"; 
var data = function (){
return {
message: "Hello World"
}
}
var fly = new Vue({
	el: '#outerWrapper',
	data: data,
});

/* indicatorLevel.style.height = '0'; */
// indicator.style.height = "50%";
//console.log("inidcator width = " + indicatorWidth);
//indicatorSVG.setAttributeNS( null ,  "viewBox", "0 " + indicatorOffset + " " + indicatorWidth + " " + indicatorHeight);
// indicatorLevel.style.width = indicatorWidth;

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;
//}