CSS/Bootstrap 3 自定义进度跟踪器

Question

我正在开发一个使用 Bootstrap 3/CSS 和可能 Jquery 的自定义进度跟踪器。我已经设法取得了一些进展，但无法使其与要求完全相同。 提前感谢您的帮助...

我无法完成的两件主要事情是： 1. 任务完成时的绿/蓝过渡（我已附上显示所需结果的图像）。 2. CSS 更改，以便我的 jsfiddle 看起来像附加的图像。

.stepwizard-step p {
margin-top: 0px;
color: #337ab7;
}

.stepwizard-row {
display: table-row;
}

.stepwizard {
display: table;
width: 100%;
position: relative;
}

.stepwizard .btn.disabled, .stepwizard .btn[disabled], .stepwizard 
fieldset[disabled] .btn {
opacity: 1 !important;
color: #337ab7;
}

.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 5px;
background-color: #337ab7;
z-index: 0;
left: 0;
}


.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}

.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 4px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
border-color:#337ab7;
}

    <div id="wizard-content">
    <div class="stepwizard">
        <div class="stepwizard-row setup-panel">
            <div class="stepwizard-step col-xs-3" id="link1">
                <a href="#" type="button" class="btn btn-default btn-circle" disabled="disabled"><span style="font-size:1.5em;" class="glyphicon glyphicon-info-sign" ></span></a>
                <p><small>Customer Info</small></p>
            </div>
            <div class="stepwizard-step col-xs-3" id="link2">
                <a href="#" type="button" class="btn btn-default btn-circle" disabled="disabled"><span style="font-size:1.5em;" class="glyphicon glyphicon-map-marker"></span></a>
                <p><small>Site Info</small></p>
            </div>
            <div class="stepwizard-step col-xs-3" id="link3">
                <a href="#" type="button" class="btn btn-default btn-circle" disabled="disabled"><span style="font-size:1.5em;" class="glyphicon glyphicon-upload"></span></a>
                <p><small>Measure Info & Document Upload</small></p>
            </div>
            <div class="stepwizard-step col-xs-3" id="link4">
                <a href="#" type="button" class="btn btn-default btn-circle" disabled="disabled"><span style="font-size:1.5em;" class="glyphicon glyphicon-check"></span></a>
                <p><small>Final Steps</small></p>
            </div>
        </div>
    </div>
</div>

我的小提琴：https://jsfiddle.net/q3k29tx5/ 样品要求：

Answer 1

我已经设法回答了我自己的问题：

 /* Wizard CSS Begin */

.page-header {
padding-bottom: 9px;
margin: 0;
border-bottom: 1px solid #eee;
}

.text-center {
text-align: center;
}

#progressbar {
margin: 0 0 30px 0;
padding: 0;
overflow: hidden;
/*counter-reset: step;*/
}

#progressbar li {
    font-family: 'Roboto', Helvetica;
    list-style-type: none;
    color: #797979;
    text-transform: uppercase;
    font-size: 12px;
    width: 25%;
    float: left;
    position: relative;
    font-weight: 500;
}

    #progressbar li:first-child:before {
        font-family: "Glyphicons Halflings";
        content: "\e086";
        font-size:27px;
    }

    #progressbar li:nth-child(2):before {
        font-family: "Glyphicons Halflings";
        content: "\e062";
        font-size: 27px;
    }

    #progressbar li:nth-child(3):before {
        font-family: "Glyphicons Halflings";
        content: "\e027";
        font-size: 27px;
    }

    #progressbar li:last-child:before {
        font-family: "Glyphicons Halflings";
        content: "\e067";
    }

    #progressbar li:before {
        /*content: counter(step);*/
        /*counter-increment: step;*/
        width: 36px;
        height: 36px;
        font-family: Ionicons;
        font-size: 25px;
        line-height: 32px;
        border-radius: 50%;
        border: 2px solid #797979;
        background-color: white;
        display: block;
        margin: 0 auto 5px auto;
    }

    #progressbar li:after {
        content: '';
        width: 100%;
        height: 15px;
        background-color: #797979;
        position: absolute;
        top: 11px;
        z-index: -1;
        left: -50%;
    }

    #progressbar li:first-child:after {
        content: none;
    }

    #progressbar li.active:before, #progressbar li.active:after, #progressbar li.active {
        border-color: #78AB46;
        color: #78AB46;
    }

        #progressbar li.active + li:after {
            background-color: #78AB46;
            content: '';
        }

        #progressbar li.active:before {
            font-family: "Glyphicons Halflings";
            /*content: '\e008';*/
        }

/* Wizard CSS End */

 <div class="page-header text-center">
            <ul id="progressbar">
                <li class="active">Customer Info</li>
                <li>Site Info</li>
                <li>Measure Info & Document Upload</li>
                <li>Final Steps</li>
            </ul>
        </div>

菲德尔：https://jsfiddle.net/yLo07ktq/

我找到了这个链接：http://fbfriends.nailfashionsweden.se/default.html#//profile 真正有用