Article From:



 See this layout, the first idea using JS calculation, and later on the subway thinking, there is a more simple solution, pure CSS is good.

1、The outermost layer of one div:relative

2、Inside a div line; absolute: Top: above height bottom: below height.

3、The front icon is put in the title: relative, absolute icon, the icon is positioned relative to the title.




<div class=”process”>
<div class=”line”></div>
<div class=”wrap” v-for=”(i,index) in 3″>
<p class=”desc” :class=”index==0?’active’:””><i class=”icon “></i><span>Hangzhou Yuhang District dispatched < /span> < /p>
<p class=”time”>2017-12-27 17:34:17</p>





.process p{padding:0;margin:0;}
.process {background:#fff;margin-top:10px;position: relative;padding-left:40px;color:#999;}
.process .line{position:absolute;top:20px;bottom:55px;border-left:1px solid #ccc;left:20px;z-index:1;}
.process .wrap{height:71px;padding-top:17px;border-bottom:1px solid #e5e5e5;}
.process .wrap:last-child{height:66px;border:none;}
.process .wrap p.time{font-size:12px;margin-top:13px;}
.process .wrap .desc{position:relative;}
.process .wrap .desc i{width:9px;height:9px;border-radius:50%;background:#ccc;position:absolute;left:-19px;top:7px;z-index:5;}
.process .wrap .active i{width:15px;height:15px;left:-22px;top:3px;background:#fff url(../../static/image/lvse@3x.png) no-repeat;background-size:100% 100%;}
.process .wrap .active {font-size:14px;color:#48C248;}




Link of this Article: Logistics progress bar

Leave a Reply

Your email address will not be published. Required fields are marked *