<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #progressBar{ width: 600px; height: 50px; position: relative; margin: 50px 0 0 100px; } #progressBar .div{ width: 100%; height: 5px; position: absolute; top:44%; left: 0; margin-top:-20px; border:1px solid #ddd; background: #ccc; } #progressBar .div span{ position: absolute; display: inline-block; background: #ED5565; height: 5px; width: 50%; } #progressBar>span{ position: absolute; top:0; margin-top: -10px; width: 25px; height: 25px; border:2px solid #ddd; border-radius: 50%; background: #ED5565; margin-left: 0; color:#fff; } #progressBar>span:nth-child(1){ left: 0%; } #progressBar>span:nth-child(2){ left: 25%; background:#ED5565; } #progressBar>span:nth-child(3){ left: 50%; background:#ED5565; } #progressBar>span:nth-child(4){ left: 75%; background:#ccc; } #progressBar>span:nth-child(5){ left: 100%; background:#ccc; } #progressBar p{ text-align: center;font-size: 12px;padding: 0;margin: 0; } </style> </head> <body> <div id="progressBar"> <!-- progress bar --> <div class="div"> <span></span> </div> <!-- five circles--> <span></span> <span></span> <span></span> <span></span> <span></span> <div class="subBar" style="position: absolute;left: -3%;top:22px"> <p>Order Placement</p> <p>20.7/11/29</p> </div> <div class="goodsBar" style="position: absolute;left: 22%;top:22px"> <p>Order Confirmation</p> <p>20.7/11/29</p> </div> <div class="goodsBar" style="position: absolute;left: 47%;top:22px"> <p>Order completed</p> <p>20.7/11/29</p> </div> <div class="goodsBar" style="position: absolute;left: 73%;top:22px"> <p style="color: #ccc">Order ships</p> <p></p> </div> <div class="goodsBar" style="position: absolute;left: 96%;top:22px;width: 80px"> <p style="color: #ccc">Order arrives in Hong Kong</p> <p></p> </div> </div> </body> </html>