如何使用jquery，css设计步进度栏

Question

我花了3天时间。我试着像下面一样设计一步一步的进度条。

====（折扣10％）======（折扣20％）=====（折扣30％）========

动态填充它我怎么能这样做我在谷歌上搜索我试图定制的每件事但到目前为止没有成功。

谢谢

Answer 1

我只是让这个激励你（不确定它是不是你想做的）。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="discount">Choose a 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>

＆＃13;

＆＃13;

＆＃13;