宽度自适应进度条

需求：

1、宽度自适应

2、结点大小固定，连接部分宽度自由拉伸

3、连接部分颜色渐变

总结：这里利用了table的自动拉伸功能。或许可以模仿table的样式优化一下代码结构。

先看样式表吧，只要在最外层添加样式“one”,"two","three"样式表示当前所要表示的步骤。

// 步骤流程
$step-default: #e0e0e0;
$step-one: #693fdc;
$step-two: #a844b4;
$step-three: #f24985;
.kczz-step-to-step {
    position: relative;
    padding: 9px 20px 39px;
    height: 86px;
    .line-to-two, .line-to-three {
        height: 5px;
        margin-right: 52px;
        margin-top: 24px;
        display: block;
        background-color: $step-default;
    }
    .step-nike, .step-number {
        display: none;
        height: 42px;
        width: 42px;
        margin: 4px auto;
        @include border-radius(50%);
        border: 1px solid #fff;
    }
    .step-number {
        color: #fff;
        text-align: center;
        line-height: 42px;
        font-family: Arial, sans-serif;
        font-size: 30px;
    }
    .step-nike {
        background: url($img-path + "kczz-step-nike.png") 11px 13px no-repeat;
    }
    .step-name {
        width: 120px;
        position: absolute;
        top: 70px;
        left: -34px;
        text-align: center;
        color: #999;
        height: 20px;
        line-height: 20px;
        font-size: 16px;
    }
    .step-div {
        height: 52px;
        width: 52px;
        text-align: center;
        display: block;
        position: relative;
        cursor: default !important;
        text-decoration: none;
        background-color: $step-default;
        @include border-radius(50%);
    }
    .table-div {
        margin-left: 52px;
        table {
            width: 100%;
        }
        td {
            margin: 0;
            padding: 0;
            width: 25%;
        }
    }
    &.one {
        .step-one {
            cursor: pointer !important;
            background-color: $step-one;
            .step-number {
                display: block;
            }
            .step-name {
                color: #444;
                &:hover {
                    color: $purple;
                }
            }
        }
        .step-two .step-number, .step-three .step-number {
            display: block;
        }
    }
    &.two {
        .line-to-two {
            background: -ms-linear-gradient(left, $step-one, $step-two);
            background: -moz-linear-gradient(left, $step-one, $step-two);
            background: linear-gradient(left, $step-one, $step-two);
            /* Safari & Chrome */
            background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, $step-one), color-stop(1, $step-two));
            /* IE */
            zoom: 1;
            background-image: linear-gradient(to right, $step-one, $step-two);
            filter: progid:DXImageTransform.Microsoft.gradient(StartColorStr= #693fdc, EndColorStr= #a844b4, GradientType=1);
        }
        .step-one {
            cursor: pointer !important;
            background-color: $step-one;
            .step-nike {
                display: block;
            }
            .step-name {
                color: #444;
                &:hover {
                    color: $purple;
                }
            }
        }
        .step-two {
            cursor: pointer !important;
            background-color: $step-two;
            .step-number {
                display: block;
            }
            .step-name {
                color: #444;
                &:hover {
                    color: $purple;
                }
            }
        }
        .step-three .step-number {
            display: block;
        }
    }
    &.three {
        .line-to-two {
            background: -ms-linear-gradient(left, $step-one, $step-two);
            background: -moz-linear-gradient(left, $step-one, $step-two);
            background: linear-gradient(left, $step-one, $step-two);
            /* Safari & Chrome */
            background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, $step-one), color-stop(1, $step-two));
            /* IE */
            zoom: 1;
            background-image: linear-gradient(to right, $step-one, $step-two);
            filter: progid:DXImageTransform.Microsoft.gradient(StartColorStr= #693fdc, EndColorStr= #a844b4, GradientType=1);
        }
        .line-to-three {
            background: -ms-linear-gradient(left, $step-two, $step-three);
            background: -moz-linear-gradient(left, $step-two, $step-three);
            background: linear-gradient(left, $step-two, $step-three);
            /* Safari & Chrome */
            background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, $step-two), color-stop(1, $step-three));
            /* IE */
            zoom: 1;
            background-image: linear-gradient(to right, $step-two, $step-three);
            filter: progid:DXImageTransform.Microsoft.gradient(StartColorStr= #a844b4, EndColorStr= #f24985, GradientType=1);
        }
        .step-one {
            cursor: pointer !important;
            background-color: $step-one;
            .step-nike {
                display: block;
            }
            .step-name {
                color: #444;
                &:hover {
                    color: $purple;
                }
            }
        }
        .step-two {
            cursor: pointer !important;
            background-color: $step-two;
            .step-nike {
                display: block;
            }
            .step-name {
                color: #444;
                &:hover {
                    color: $purple;
                }
            }
        }
        .step-three {
            cursor: pointer !important;
            background-color: $step-three;
            .step-number {
                display: block;
            }
            .step-name {
                color: #444;
                &:hover {
                    color: $purple;
                }
            }
        }
    }
}

在看看html，利用table来布局

<!-- 步骤图（自适应宽度） -->
<div class="kczz-step-to-step two clearfix">
    <a class="fleft step-div step-one" href="javascript:void(0);">
        <span class="step-number">1</span>
        <ins class="step-nike"></ins>
    </a>
    <div class="table-div">
        <table>
            <tr>
                <td class="clearfix">
                    <a class="fright step-div step-two" href="javascript:void(0);">
                        <span class="step-number">2</span>
                        <ins class="step-nike"></ins>
                    </a>
                    <div class="line-to-two"></div>
                </td>
                <td class="clearfix">
                    <a class="fright step-div step-three" href="javascript:void(0);">
                        <span class="step-number">3</span>
                        <ins class="step-nike"></ins>
                    </a>
                    <div class="line-to-three"></div>
                </td>
            </tr>
        </table>
    </div>
</div>

最后是效果图