<!-- Stage progress indicator by Raj Madhuram http://geekraj.com Circle code from: http://jsfiddle.net/RsGQ4/ --> <link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'> <div class="stage done"> <span class="txt"> 1 </span> </div> <div class="beam done"> </div> <div class="stage done"> <span class="txt"> 2 </span> </div> <div class="beam"> </div> <div class="stage"> <span class="txt"> 3 </span> </div> <div class="beam"> </div> <div class="stage"> <span class="txt"> 4 </span> </div>
.stage { border:1px solid #ccc; height:20px; width:20px; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; background: #eee; float: left; } .beam { width: 20px; position: relative; height: 3px; top: 9px; background: #ccc; float: left; } .done { background: #88ff88; } .stage .txt { font-family: 'Fjalla One', sans-serif; font-size: 12px; position: relative; left: 7px; top: -1px; }