load indicator - HTML SVG

by p_russell

HTML

<div class="outerContainer">
  <div class="container">
    <div id="clock">

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

JavaScript

var countUp = setInterval(updateClocks, 1000);

function updateClocks() {
// show time since AJAX update - but only update at retrieve interval
	var now = Math.floor( Date.now() / 1000 );
 console.log ( 'updateClocks now = '+ now );

// Display time since last data update
	var secondsSinceUpdate = now - lastUpdateTime;
 // console.log ( 'updateClocks now = '+ now + 'lastUpdateTime' + lastUpdateTime );	
	var hours = Math.floor( secondsSinceUpdate / 3600 );
	var minutes = Math.floor( ( secondsSinceUpdate - hours * 3600 ) / 60 );
	var seconds = secondsSinceUpdate - hours * 3600 - minutes * 60;
	zeroSec = ( seconds < 10 ) ? "0" : "";
	zeroMin = ( minutes < 10 ) ? "0" : "";
	timeSinceUpdate = "+" + hours + ":" + zeroMin + minutes + ":" + zeroSec + seconds;
console.log ("time since update = " + hours + ":" + zeroMin + minutes + ":" + zeroSec + seconds);


}