CSS实现进度条和订单进度条---横向

由于近期需要做一个订单进度条，比较直观的反应当前订单的状态，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,则创建订单显示为有色，其他都是灰色的。其他以此类推。 

       本质上可以理解为，如果从后台取到了相应的时间，比如下单、审核时间等，对所在的圆点上色显示即可！！！

竖向订单进度条展示