Some sort of bar thing

by Sam Fereday

HTML

<div id="output">
  <div id="bar"></div>
</div>

CSS

#output {
  width: 255px;
  background: #330000;
}
#bar {
  width: 0;
  padding: 1em 0;
  background: #770000;
  //transition: all 0.1s;
}

JavaScript

var cont = document.getElementById("output");
var bar = document.getElementById("bar");

var maxWidth = 255; // This ogverns the maximum width of the actual element that gets affected. Since we'll get a percentage out of our max time, we can directly apply it to this.
var maxTime = 900; // This is the upper limit the timer gets to before it resets to zero again, this could vary depending on how your timer's been set up.
var currentTime = 0; // Your current time is going to be anywhere between zero and max time. So this is where you need to get the percentage of it.
var splitBy = 1000;
var interval = 15;

function incThing()
{

	// Percentile of current time next to max time:
  var timePercentile = Math.round((currentTime / maxTime) * 100);
  
  // If your current time is still set to max, reset it now.
  if(currentTime >= maxTime) {
  	currentTime = 0;
  	console.log("Perform action.");
  } else {
  	// Increment by fraction amount
		currentTime += maxTime / splitBy;
  }
  
	// P% * X = (P/100) * X = Y
	// Convert decimal to percentage first
  var p = timePercentile / 100;
  
  // Then we compare against our value to get the value from the percentage
  var againstWidth = p * maxWidth;
  bar.style.width = againstWidth + 'px';
  
  // Set to max time for the final calculation, we reset after this.
  if(currentTime > maxTime)
  	currentTime = maxTime;
  
	setTimeout(incThing, interval);
  
}

incThing();