load indicator - HTML SVG VUE control

Use view to control SVG dimensions

by p_russell

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="outerContainer">
  <div class="container">
    <div id="indicator">

       <svg id="SVG" xmlns="http://www.w3.org/2000/svg" 
			 		width="100%" height="100%"
 v-bind:view-box.camel = "viewBoxSize" >
					<rect id = "indicatorLevel" fill="#F1C40F" width="100%" 
						height="100%" /> 
       </svg>
    </div>
  </div>
</div>

CSS

body {
  background-color: green;
	  width: 200px;
  height: 200px;
}

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

.container {
  position: relative;
  width: 100px;
  height: 3.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;
console.log("inidcator height = " + indicatorHeight);
var indicatorWidth = indicator.clientWidth;
console.log("inidcator width = " + indicatorWidth);


var data= function () {
	return {
		indicatorOffset: -indicatorHeight
	}
}

var fly = new Vue({
	el: '#indicator',
	data: data,
	methods:{
	},
	computed: {
		viewBoxSize: function() {
				var viewBoxSize = "0 " + this.indicatorOffset +
				" " + indicatorWidth + " " + indicatorHeight ; 
				return viewBoxSize;
		}
	}
});


var countUp = setInterval(updateClocks, 1000);
var increment = indicatorHeight / 100;
function updateClocks() {	  
	offset = fly.indicatorOffset + increment;
	if (offset > 0) offset = -indicatorHeight;
	fly.indicatorOffset = offset;
//	console.log ("indicatorOffset = " + fly.indicatorOffset);
}