<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <span class="lead">Progress:</span> <div class="glyphprogress"> <div class="connecting-line"></div> <ul> <li> <span class="glyphstep"> <i class="glyphicon glyphicon-user"></i> </span> </li> <li> <span class="glyphstep"> <i class="glyphicon glyphicon-phone"></i> </span> </li> <li> <span class="glyphstep"> <i class="glyphicon glyphicon-envelope"></i> </span> </li> </ul> </div>

.glyphprogress { background: #fff; width: 300px; color: #e0e0e0; display: inline-block; } .glyphprogress ul { list-style: none; -webkit-margin-before: 0px; -webkit-margin-after: 0px; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 0px; margin: 0; } .glyphprogress li { display: inline-block; width: 31% } .connecting-line { height: 2px; background: #e0e0e0; float: left; position: relative; width: 70%; margin: 0 auto; left: 0; right: 0; top: 20px; z-index: 1; } .glyphstep { width: 40px; height: 40px; line-height: 40px; display: inline-block; border-radius: 40px; background: #fff; border: 2px solid #e0e0e0; z-index: 2; position: relative; left: 0; text-align: center; font-size: 20px; } .glyphstep i { } .glyphcomplete { border: 2px solid lightgreen !important; color: lightgreen; } .glyphactive { border: 2px solid lightblue !important; color: lightblue; }

function SetActiveGlyphStep(stepNumber) { $steps = $('.glyphstep'); if (stepNumber !== parseInt(stepNumber) || stepNumber < $steps.length || stepNumber > $steps.length) { stepNumber = 1; } $('.glyphstep').each(function(index){ if (index < stepNumber) { $(this).removeClass('glyphactive'); $(this).removeClass('glyphcomplete'); $(this).addClass('glyphcomplete'); } else if (index == stepNumber) { $(this).removeClass('glyphactive'); $(this).removeClass('glyphcomplete'); $(this).addClass('glyphactive'); } else { $(this).removeClass('glyphactive'); $(this).removeClass('glyphcomplete'); } }); } $(document).ready(function(){ SetActiveGlyphStep(3); });