水平時間軸 html + css

比較粗糙，效果如圖

這個是寫微信頁面時寫的，pc 也是一樣的效果

代碼如下：

<div class="time_line_box">
            <div class="time_line" style="width:100%;">
                <ol>
                    <li>
                        <a class="order_item" style="left:10%;">預約</a>
                    </li>
                    <li>
                        <a class="order_item selected" style="left:25%;">行家確認</a>
                    </li>
                    <li>
                        <a class="order_item" style="left:45%;">付款</a>
                    </li>
                    <li>
                        <a class="order_item" style="left:65%;">見面</a>
                    </li>
                    <li>
                        <a class="order_item" style="left:85%;">評價</a>
                    </li>
                </ol>
                <span class="filling_line" style="transform: scaleX(0.28);"></span>
            </div>
        </div>
        <div class="time_tip">
                付款剩余時間：23：58
        </div>

css:

.time_line_box{
        position: relative;
        height: 60px;
        overflow: hidden;
    }
    .time_line{
        position: absolute;
    z-index: 1;
    left: 0;
    top: 49px;
    height: 2px;
    background: #dfdfdf;
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s;
    }
    .order_item{
        position: absolute;
    bottom: 0;
    z-index: 2;
    text-align: center;
    font-size: 13px;
    padding-bottom: 15px;
    color: #825FFB;
    }
    .order_item:after{
        content: '';
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: -5px;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    border: 2px solid #dfdfdf;
    background-color: #f8f8f8;
    }
    .selected:after{
        background-color: #845FFD;
    border-color: #845FFD;
    }
    .filling_line{
        position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #845FFD;
    transform-origin: left center;
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: initial;
    transition-delay: initial;
    }
    .time_tip{
        width: 100%;
        height: 100px;
        line-height: 70px;
        text-align: center;
        color: #151BFD;
        border-bottom: 1px solid #ddd;
    }

ps：沒有寫jquey 代碼，因為目前寫的項目是vux 框架 ，基於vue 和 we_ui，寫jquery比較麻煩

     進度的渲染是根據.filling_line 的transform scaleX值 變化 ，所以如果寫js 的話 根據不同

    狀態改變相應的值就可以，如果 用的話，相關樣式自行修改