<html> <head> <title>progress</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style> /*订单进度条*/ .progress-x{ width: 80%; height: 40px; position: relative; margin: 10px auto; } .progress-x div{ width: 100%; height: 5px; position: absolute; top:50%; left: 0; margin-top:-2px; border:1px solid #ddd; background: #ccc; } .progress-x div span{ position: absolute; display: inline-block; background:#71e0b0; height: 4px; } .progress-x>span{ position: absolute; top:0; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; margin-left: -20px; color:#fff; background: #ccc } .progress-x>span:nth-child(1){ left: 0%; } .progress-x>span:nth-child(2){ left: 25%; } .progress-x>span:nth-child(3){ left: 50%; } .progress-x>span:nth-child(4){ left: 75%; } .progress-x>span:nth-child(5){ left: 100%; } </style> </head> <body> <div class="progress-x"> <!-- 进度条 --> <div> <span width="75%"></span> </div> <!-- 五个圆 --> <span>准备</span> <span>开始</span> <span>进行中</span> <span>待完成</span> <span>已完成</span> </div> </body> </html>
