javascript - How to design step progress bar using jquery,css -

i spent 3 days. tried design step step progress bar below.

====(discount 10 %)======(discount 20 %)=====(discount 30 %)========

fill dynamically how can searched on google every thing tried customize not success far.

thanks

i've made inspire (not sure if it's try do).

$(document).ready(function() {  	$('#discount').on('change', function() {  		$('#discount-bar').css({'width' : $(this).val() + '%'});  	});  });

select {    margin-bottom: 12px;  }    .discount-bar-container {    position: relative;    width: 400px;    height: 30px;    border: 1px solid black;    -moz-border-radius: 4px;    -webkit-border-radius: 4px;    border-radius: 4px;  }  .discount-bar-container .discount-bar {    position: absolute;    display: block;    height: 100%;    width: 0;    background-color: red;    transition: width 0.4s;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <label for="discount">choose value :</label>  <select name="discount" id="discount">  	<option value="0">0%</option>  	<option value="10">10%</option>  	<option value="20">20%</option>  	<option value="30">30%</option>  	<option value="40">40%</option>  	<option value="50">50%</option>  	<option value="60">60%</option>  	<option value="70">70%</option>  	<option value="80">80%</option>  	<option value="90">90%</option>  	<option value="100">100%</option>  </select>    <div class="discount-bar-container">  	<div class="discount-bar" id="discount-bar"></div>  </div>