.progress-wrap { margin-top:50px; padding:0px; width:100%; height:100px; } .progress-wrap li { margin-top:30px; list-style:none; float:left; width:150px; height:30px; position:relative; } .progress-wrap .progress-line { background-color:#b9b9b9; position:absolute; height:8px; width:100%; top:13px; margin-left:2px; transition:background-color 2s linear; -moz-transition:background-color 2s linear; -webkit-transition:background-color 2s linear; -o-transition:background-color 2s linear; } .progress-wrap .progress-content { position:absolute; text-align:center; } .progress-wrap .progress-content .progress-number { display:inline-block; *zoom:1; position:absolute; width:30px; height:30px; line-height:30px; color:#fff; border-radius:50%; border:2px solid rgba(224,224,224,1); font-family:tahoma; font-weight:bold; font-size:16px; background-color:#b9b9b9; box-shadow:1px 1px 2px rgba(0,0,0,.2) inset; cursor:pointer; } .progress-wrap .progress-content .progress-text { position:absolute; font-size:12px; width:30px; top:42px; color:#b9b9b9; }