模块代码之流程进度条1

效果如下：

HTML结构代码：

 1 <div class="gb-progress">
 2     <dl>
 3         <dd class="selected">
 4             <h4>提交</h4>
 5         </dd>
 6         <dd class="selected">
 7             <h4>处理</h4>
 8         </dd>
 9         <dd>
10             <h4>完成</h4>
11         </dd>
12     </dl>
13 </div>

主要CSS代码：

 1 /*流程进度条*/
 2 .gb-progress {
 3     padding: 40px 0; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; margin-top: 20px;
 4     overflow: hidden;
 5 }
 6 .gb-progress dl {
 7     position: relative; padding-top: 25px;
 8 }
 9 .gb-progress dl::before {
10     content: ""; z-index: 9; position: absolute; top: 0; left: 17%; width: 0; height: 5px; background: #28c8fc;
11 }
12 .gb-progress dl::after {
13     content: ""; position: absolute; top: 0; left: 17%; width: 66.66%; height: 5px; background: #c8c8c8;
14 }
15 .gb-progress dl.len1::before {
16     width: 33.33%;
17 }
18 .gb-progress dl.len2::before {
19     width: 66.66%;
20 }
21 .gb-progress dd {
22     position: relative; float: left; width: 33.33%; text-align: center;
23 }
24 .gb-progress dd::after {
25     content: ""; z-index: 9; position: absolute; left: 50%; top: -35px; width: 25px; height: 25px; border-radius: 100%; background: #c8c8c8; -webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); transform: translate(-50%,0);
26 }
27 .gb-progress dd.selected::after {
28     background: #28c8fc;
29 }
30 .gb-progress dd * {
31     font-size: 24px; color: #8d8d8d; line-height: 2;
32 }
33 .gb-progress dd.selected h4 {
34     color: #28C8FC;
35 }

JS代码：

1 $(function(){
2     var pl = $(‘.gb-progress dl‘);
3     var index = pl.find(‘.selected‘).last().index();
4     pl.addClass(‘len‘+index);
5 });

上面主要思路，即灰色的长条由dl::after设置，为dd长度总和。绿色的长条样式由dl::before，其长度通过JS查找.selected然后添加对应的‘len‘+index。圆点由dd相同思路控制。