A Cool Design

by Ryan Brewer

HTML

<div class="steps">
        <p class="step1 active"><b>01</b></p>
        <p class="step2"><b>02</b></p>
        <p class="step3"><b>03</b></p>
        <p class="step4"><b>04</b></p>
        <p class="step5"><b>05</b></p>
    </div>

CSS

.steps{
    width:100%;
    height:2px;
    margin:40px 0 0 0;
    background:#f2b913;
    float:right;
    z-index:999999999999999999;
    position:relative;
}

.steps p{
    float:left;
    width:60px;
    position:absolute;
    height:60px;
    border-radius:50%;
    text-align:center;
    line-height:50px;
    color:white;
    background:#FFF;
    padding:2px;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    margin:-30px 0 0 0px;
    cursor:pointer;
    border:3px solid #f2b913;
    font-size:20px;
}

.steps p b{
    width:100%;
    height:100%;
    float:left;
    border-radius:50%;
    background:#f2b913;
}

.steps p:hover b, .steps p.active b{background:#019084;;}

.step1{margin-left:0;}
.step2{margin-left:60px;}
.step3{margin-left:120px;}
.step4{margin-left:180px;}
.step5{margin-left:240px;}

JavaScript

$(document).ready(function (){
    $(".step1").css("left","auto").animate({"right":"0px"}, "slow");
    $(".step2").animate({"left":"0px"}, "slow");
    $(".step3").animate({"left":"60px"}, "slow");
    $(".step4").animate({"left":"120px"}, "slow");
    $(".step5").animate({"left":"180px"}, "slow");
});