由于近期需要做一个订单进度条，比较直观的反应当前订单的状态，css样式借鉴了网上的相关代码，下面是效果图，以及实现说明
1.首先页面需要引入jQuery的相关js,一般页面都已经引入了就不多做说明，进度条CSS样式
<style type="text/css">
/*进度条start*/
.order_status {
height: 175px;
padding-top: 90px;
padding-left: 160px
}
.order_status .s-step {
float: left;
width: 170px;
height: 60px;
position: relative;
}
.order_status .s-step:nth-child(6n) {
width: 0px;
}
.order_status .s-step.active {
float: left;
width: 170px;
height: 60px;
position: relative;
}
.order_status .s-step>b>b.active {
background-color: #337ab7
}
.order_status .s-step>b {
display: block;
width: 32px;
height: 32px;
line-height: 32px;
border-radius: 32px;
position: absolute;
margin-left: -16px;
top: -20px;
z-index: 87
}
.order_status .s-step>b>b {
display: block;
width: 26px;
height: 26px;
line-height: 26px;
border-radius: 26px;
background: #ccc;
margin-top: 3px;
margin-left: 3px;
z-index: 88
}
.order_status .s-step>p {
width: 161px;
border: 1px dashed #ddd;
top: -20px;
position: absolute;
z-index: 86
}
.order_status .s-step>p.active {
width: 161px;
border: 1px dashed #337ab7;
top: -20px;
position: absolute;
z-index: 86
}
.order_status .s-step em {
display: block;
padding-top: 20px;
font-style: normal;
text-align: center;
color: #b7b7b7;
font-size: 12px;
margin-left: -65px;
width: 130px
}
.order_status .s-step>div {
display: block;
width: 80px;
height: 32px;
line-height: 32px;
position: absolute;
margin-left: -40px;
top: -55px;
z-index: 87;
text-align: center;
font-size: 12px;
color: #c9c4c4
}
.order_status .s-step>div.active {
display: block;
width: 80px;
height: 32px;
line-height: 32px;
position: absolute;
margin-left: -40px;
top: -55px;
z-index: 87;
text-align: center;
font-size: 12px;
color: #337ab7
}
/*步骤条end*/
</style>
2.页面相关代码
代码如下（示例）：
<p style="color: black; font-size: 15px; font-weight: bold">订单进度条：</p>
<div class="order_status">
<span class="s-step s-step0"> <b> <b></b>
</b>
<p></p> <em><label id="orderTime"
th:text="${orderInfo.orderTime}"></label></em>
<div>创建订单</div>
</span> <span class="s-step s-step1"> <b> <b></b>
</b>
<p></p> <em><label id="auditTime"
th:text="${orderInfo.auditTime}"></label><input id="state"
type="hidden" th:value="${orderInfo.orderStatus}" /></em>
<div>审核订单</div>
</span> <span class="s-step s-step2 "> <b> <b></b>
</b>
<p></p> <em><label id="productionTime"
th:text="${orderInfo.productionTime}"></label></em>
<div>生产</div>
</span> <span class="s-step s-step3"> <b> <b></b>
</b>
<p></p> <em><label id="completTime"
th:text="${orderInfo.completTime}"></label></em>
<div>完成生产</div>
</span> <span class="s-step s-step4"> <b> <b></b>
</b>
<p></p> <em><label id="deliveryTime"
th:text="${orderInfo.deliveryTime}"></label></em>
<div>配送</div>
</span> <span class="s-step s-step5"> <b> <b></b>
</b> <em><label id="receivingTime"
th:text="${orderInfo.receivingTime}"></label></em>
<div>签收</div>
</span>
</div>3.JS部分代码，页面使用 themleaf模板
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
//步骤条,圆点下面显示的时间
var orderTime = document.getElementById("orderTime").innerText;
var auditTime = document.getElementById("auditTime").innerText;
var productionTime = document.getElementById("productionTime").innerText;
var completTime = document.getElementById("completTime").innerText;
var deliveryTime = document.getElementById("deliveryTime").innerText;
var receivingTime = document.getElementById("receivingTime").innerText;
var state = document.getElementById("state").value;
if (orderTime != null && orderTime != '') {
$(".s-step0>b>b,.s-step0>p,.s-step0>div").addClass("active");
$(".s-step1>em,.s-step2>em,.s-step3>em,.s-step4>em,.s-step5>em")
.hide();
}
if (auditTime != null && auditTime != '' && state == 1) {
$(
".s-step1>b>b,.s-step1>p,.s-step1>div,.s-step0>b>b,.s-step0>p,.s-step0>div")
.addClass("active");
$(".s-step1>em").show();
}
if (productionTime != null && productionTime != '') {
$(
".s-step2>b>b,.s-step2>div,.s-step1>p,.s-step1>b>b,.s-step1>div,.s-step0>b>b,.s-step0>p,.s-step0>div")
.addClass("active");
$(".s-step1>em,.s-step2>em").show();
}
if (completTime != null && completTime != '') {
$(
".s-step3>b>b,.s-step3>div,.s-step2>p,.s-step2>b>b,.s-step2>div,.s-step1>p,.s-step1>b>b,.s-step1>div,.s-step0>b>b,.s-step0>p,.s-step0>div")
.addClass("active");
$(".s-step1>em,.s-step2>em,.s-step3>em").show();
}
if (deliveryTime != null && deliveryTime != '') {
$(
".s-step4>b>b,.s-step4>div,.s-step3>p,.s-step3>b>b,.s-step3>div,.s-step2>p,.s-step2>b>b,.s-step2>div,.s-step1>p,.s-step1>b>b,.s-step1>div,.s-step0>b>b,.s-step0>p,.s-step0>div")
.addClass("active");
$(".s-step1>em,.s-step2>em,.s-step3>em,.s-step4>em").show();
}
if (receivingTime != null && receivingTime != '') {
$(
".s-step5>b>b,.s-step5>div,.s-step4>p,.s-step4>b>b,.s-step4>div,.s-step3>p,.s-step3>b>b,.s-step3>div,.s-step2>p,.s-step2>b>b,.s-step2>div,.s-step1>p,.s-step1>b>b,.s-step1>div,.s-step0>b>b,.s-step0>p,.s-step0>div")
.addClass("active");
$(".s-step1>em,.s-step2>em,.s-step3>em,.s-step4>em,.s-step5>em")
.show();
}
/*]]>*/
</script>举一个例子说明： if (orderTime != null && orderTime != ' ') {
$(".s-step0>b>b,.s-step0>p,.s-step0>div").addClass("active");
$(".s-step1>em,.s-step2>em,.s-step3>em,.s-step4>em,.s-step5>em")
.hide();
}
当后台传入的订单时间不为空，也就是已经创建了订单时，获取.s-step0的<p><div>标签，设置calss状态为“active”为可见，其他显示为hide,则创建订单显示为有色，其他都是灰色的。其他以此类推。
本质上可以理解为，如果从后台取到了相应的时间，比如下单、审核时间等，对所在的圆点上色显示即可！！！