Step Indicator - New

Step Indicator - New

by pj_js15

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class='mainContainer'>
    <div class='step step0'>
        <svg>
            <g inkscape:groupmode="layer" id="layer2" inkscape:label="Layer 2" style="display:inline">
                <path class='step-fill-done' style="fill-rule:evenodd;stroke:#fff;stroke-width:4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 1.3629779,1.0380794 92.8233791,0 26.978223,32.9225736 -26.978223,32.465322 -92.8233791,0 26.5209711,-32.00806 z" id="path3340" inkscape:connector-curvature="0"
                sodipodi:nodetypes="ccccccc" />
            </g>
        </svg>
    </div>
    <div class='step'>
        <svg>
            <g inkscape:groupmode="layer" id="layer2" inkscae:label="Layer 2" style="display:inline;">
                <path class='step-fill-done' style="fill-rule:evenodd;stroke:#fff;stroke-width:4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 1.3629779,1.0380794 92.8233791,0 26.978223,32.9225736 -26.978223,32.465322 -92.8233791,0 26.5209711,-32.00806 z" id="path3340" inkscape:connector-curvature="0"
                sodipodi:nodetypes="ccccccc" />
            </g>
        </svg>
        <div class='text'>Personal</div>
        <div class='icon-status'>&nbsp;</div>
    </div>
    <div class='step'>
        <svg>
            <g inkscape:groupmode="layer" id="layer2" inkscape:label="Layer 2" style="display:inline">
                <path class='step-fill-active' style="fill-rule:evenodd;stroke:#fff;stroke-width:4px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 1.3629779,1.0380794 92.8233791,0 26.978223,32.9225736 -26.978223,32.465322 -92.8233791,0 26.5209711,-32.00806 z" id="path3340" inkscape:connector-curvature="0"
                sodipodi:nodetypes="ccccccc" />
            </g>
        </svg>
        <div class='text'>Check Cover</div>
        <div class='icon-status'>&nbsp;</div>
    </div>
    <div...

CSS

* {
    font-family: Arial;
}

.mainContainer {
    border-top: 5px solid #662083;
    border-bottom: 5px solid #662083;
    height: 68px;
    width: 900px;
    padding-left:28px;
}

.step {
    width: 125px;
    display: inline-block;
    margin-right: -37px;
}

.step0 {
    width: 5px;
}

.step-fill-default {
    fill: #A478B5;
}

.step-fill-active {
    fill: #662083;
}

.step-fill-done {
    fill: #89BC3B;
}

.text {
    color: #FFF;
    font-size: 14px;
    position: relative;
    top: -130px;
    left: 42px;
    width: 82px;
    text-align: center;
    height: 17px;
}

.icon-status {
    border: 1px solid #FFF;
    width: 5px;
    height: 5px;
    position: relative;
    padding: 5px;
    display: block;
    top: -128px;
    left: 75px;
}