javascript - How to overlay fillable checkpoints on a progress bar -


i have progress bar several 'checkpoints'.

enter image description here

i want checkpoints filled linearly progress bar reaches reach point in way appears natural. progress bar fills left right, should fill checkpoint , stop until receives further user interaction.

i used jquery fill each checkpoint when progress bar reached applying css class when progress fill animation over. looked amateur though. want make same fill animation applied both progress bar , checkpoint stops at.

how can using pure css?

<div class="progress">             <div class="progress-bar">                 <div class="progress-indicator item-0"></div>                 <div class="progress-indicator item-1"></div>                 <div class="progress-indicator item-2"></div>                 <span class="progress-bar-fill-area" style="width: 22.5%;"></span>             </div>         </div> 

if consider base64 encoded images in css pure css, can use them mask, overlaying them on progress-bar.

var n = 0;  setinterval(function() {  	var bar = document.queryselector(".progress");  	bar.classlist.remove("step" + ((n + 4) % 5));  	bar.classlist.add("step" + n);  	n = (n + 1) % 5;  }, 2000);
.progress-bar {  	width: 500px;  	height: 32px;  	background-color: gray;  	position: relative;  }    .progress-indicator {  	position: absolute;  	top: 0;  	bottom: 0;  	left: 0;  	right: 0;  	background-image: url('data:image/png;base64,ivborw0kggoaaaansuheugaaah0aaaagcayaaaa/khcmaaabfuleqvro3u3ypw6dmbiayx8vmyleqb4dopuyvaismffteowexgluql1gsinfag6a2jhcsr36k6fsved9vjz51ycnutd1vlgqn2wb0uf0eb1eb9fbdbadrafr8qtergmtvthmeekqeiiyyw5aay8i7+v4dzuglmu2qqr2zrnzz8+ttc00tcdt2zimpzejl8uy+yq4uko5585vve1fhelpqveur977u0vwdl33wo4bajdixy+l3p+ntfbjod5csrzt2xofbalylqw11jy/rev7/n5d11uijydgqkzpon4x3lrbzpm8xhh5vsd1vouo3w7n8zx/gobh+cn0py7l0syyodovfa93oopoidqidqkd6ca6ii4/9az+blvj/motkwaaaabjru5erkjggg==');  	float: left;  }    .progress-bar-fill-area {  	position: absolute;  	top: 0;  	bottom: 0;  	left: 0;  	right: 0;  	background-color: #63bc62;  	width: 0%;  }    .step1 .progress-bar-fill-area {  	width: 25%;  	transition: width 1s;  }    .step2 .progress-bar-fill-area {  	width: 50%;  	transition: width 1s;  }    .step3 .progress-bar-fill-area {  	width: 75%;  	transition: width 1s;  }    .step4 .progress-bar-fill-area {  	width: 100%;  	transition: width 1s;  }
<div class="progress">  	<div class="progress-bar">  		<div class="progress-bar-fill-area"></div>  		<div class="progress-indicator"></div>  	</div>  </div>


Comments