Pure javascript and CSS progress bar

index.html

<div class="wrapper">
	<div id="progressbar">
		<div id="progress"></div>
	</div>
</div>

pure-javascript-and-css-progress-bar.markdown

Pure javascript and CSS progress bar

Progress bar for slider using pure JavaScript and CSS3. Progresse bar size base on parent container width

A Pen by Richard Vacchino-Marceau on CodePen.

License.

script.js

(function() {
var progressBar = document.getElementById('progressbar'),
progress =  document.getElementById('progress'),
parent = progressbar.parentNode,
duration = 5, //seconds
nbSlide = 7,
step = parent.offsetWidth / nbSlide,
cpt = 0;

for (i = 0; i < nbSlide - 1; i++){
	var node = document.createElement("DIV");
	node.className = 'step'
	progressBar.appendChild(node);
}

 var steps = document.getElementsByClassName('step');

for (index = 0; index < steps.length; index++) {
	steps[index].style.width = (step - 1) * 100 / parent.offsetWidth + "%";
}

function updateProgressBar(){
	
	step = parent.offsetWidth / duration

	if(cpt >= duration * nbSlide){
		cpt = 1;
	}else{
		cpt++;
	}

	progress.style.width = (step * cpt / nbSlide) * 100 / parent.offsetWidth + "%";

	setTimeout(updateProgressBar,1000);
}

setTimeout(updateProgressBar,1000);

// progressbar.style.width
})();

style.scss

.wrapper{
	position: absolute;
	left: 25%;
	width: 50%;
	height: 100%;
}

#progressbar{
	position: relative;
	top: 49%;
	width: 100%;
	height: 2%;
	border: 1px solid black;
	
	#progress{
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		height: 100%;

		background: orange;
		transition: all 1s linear;
	}
	
	div.step{
		position: relative;
		border-right: 1px solid black;
		height: 100%;
		float: left;
		z-index: 999;
	}
}