Boa tarde
Estou fazendo um sistema para mostrar o status dos pedidos do cliente.
Até agora só estou fazendo a interface. Porém vou ler as informações do banco de dados.
Segue abaixo os códigos HTML e CSS.
Segue também a imagem de como eu estou pensando em ficar.
Gostaria de fazer que na linha "Em Produção até Elétrica e Testes" houvesse um ícone com o progresso da situação do pedido, por exemplo, 50% o ícone estará na metade do percurso e assim por diante. Alguém pode me dar uma luz como posso fazer isso?
<html>
<head>
<meta charset="utf-8">
<title>Teste</title>
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<table align="center_verde" border="0px" width="70%">
<tr>
<td>
<div class="container_text">
<div style="width:30px; height:1px; background: #fff;"></div>
<p class="p1">Pedido<br>Realizado</p>
<div style="width:25px; height:1px; background: #fff;">
</div>
<p class="p1">Ord. Produção<br>Criada</p>
<div style="width:35px; height:10px; background: #fff;">
</div>
<p class="p1">Em<br>Produção</p>
<div style="width:190px; height:10px; background: #fff;">
</div>
<p class="p1">Elétrica e<br>Testes</p>
<div style="width:50px; height:1px; background: #fff;">
</div>
<p class="p1">Pintura</p>
<div style="width:45px; height:1px; background: #fff;">
</div>
<p class="p1">Embalagem</p>
<div style="width:35px; height:1px; background: #fff;">
</div>
<p class="p1">Pronto para<br>Entrega</p>
</div>
</td>
</tr>
<tr><td>
<div class="container">
<div style="width:30px; height:1px; background: #fff;"></div>
<div class="board">
<div class="circle outer_verde">
<div class="circle center_verde"></div>
</div>
<div class="linha_verde"></div>
</div>
<div class="container">
<div class="board">
<div class="circle outer_verde">
<div class="circle center_verde"></div>
</div>
<div class="linha_verde"></div>
</div>
<div class="container">
<div class="board">
<div class="circle outer_verde">
<div class="circle center_verde"></div>
</div>
<div class="linha_producao"></div>
</div>
</div>
<div class="container">
<div class="board">
<div class="circle outer_verde">
<div class="circle center_verde"></div>
</div>
<div class="linha_verde"></div>
</div>
</div>
<div class="container">
<div class="board">
<div class="circle outer_verde">
<div class="circle center_verde"></div>
</div>
<div class="linha_verde"></div>
</div>
</div>
<div class="container">
<div class="board">
<div class="circle outer_verde">
<div class="circle center_verde"></div>
</div>
<div class="linha_verde"></div>
</div>
</div>
<div class="container">
<div class="board">
<div class="circle outer_verde">
<div class="circle center_verde"></div>
</div>
</div>
</div>
</div>
</td></tr>
<tr>
<td>
<div class="container_text">
<div style="width:10px; height:1px; background: #fff;">
</div>
<p class="p2">Data: 02/06/2017<br>Hora: 10:55</p>
<div style="width:20px; height:1px; background: #fff;">
</div>
<p class="p2">Data: 02/06/2017<br>Hora: 14:35</p>
<div style="width:16px; height:1px; background: #fff;">
</div>
<p class="p2">Data: 04/06/2017<br>Hora: 19:00</p>
<div style="width:150px; height:1px; background: #fff;">
</div>
<p class="p2">Data: 21/07/2017<br>Hora: 14:35</p>
<div style="width:20px; height:1px; background: #fff;">
</div>
<p class="p2">Data: 24/07/2017<br>Hora: 16:22</p>
<div style="width:20px; height:1px; background: #fff;">
</div>
<p class="p2">Data: 02/06/2017<br>Hora: 14:35</p>
<div style="width:24px; height:1px; background: #fff;">
</div>
<p class="p2">Previsão<br>05/08/2017</p>
</div>
</td>
</tr>
<tr>
<td>
<div class="container">
<div style="width:15px; height:1px; background: #fff;"></div>
<div class="board">
<div class="botao center_botao_verde"><div class="p3">Completo</div></div>
<div style="width:35px; height:1px; background: #fff;"></div>
</div>
<div class="container">
<div class="board">
<div class="botao center_botao_verde"><div class="p3">Completo</div></div>
<div style="width:35px; height:1px; background: #fff;"></div>
</div>
<div class="container">
<div class="board">
<div class="botao center_botao_verde"><div class="p3">Completo</div></div>
<div style="width:165px; height:1px; background: #fff;"></div>
</div>
<div class="container">
<div class="board">
<div class="botao center_botao_verde"><div class="p3">Completo</div></div>
<div style="width:35px; height:1px; background: #fff;"></div>
</div>
<div class="container">
<div class="board">
<div class="botao center_botao_verde"><div class="p3">Completo</div></div>
<div style="width:35px; height:1px; background: #fff;"></div>
</div>
<div class="container">
<div class="board">
<div class="botao center_botao_verde"><div class="p3">Completo</div></div>
<div style="width:35px; height:1px; background: #fff;"></div>
</div>
<div class="container">
<div class="board">
<div class="botao center_botao_verde"><div class="p3">Completo</div></div>
<div style="width:35px; height:1px; background: #fff;"></div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
html, body {
height: 100%;
}
.container {
display: flex;
}
.board {
display: flex;
align-items: center;
}
.container_text {
display: flex;
justify-content: left;
}
.espaco_texto {
width: 150px;
height: 0px;
background: #000;
}
.circle {
border-radius:50%;
border:3px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
.botao {
border:3px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
.outer_amarelo {
border-radius: 50%;
height: 40px;
width: 40px;
border: 3px solid #BA9500;
background-color: rgba(10,23,55,0.0);
}
.outer_verde {
border-radius: 50%;
height: 40px;
width: 40px;
border: 3px solid #006633;
background-color: rgba(10,23,55,0.0);
}
.linha_verde {
width: 60px;
height: 3px;
background: #006633;
}
.linha_amarela {
width: 60px;
height: 3px;
background: #ffcc00;
}
.linha_cinza {
width: 60px;
height: 3px;
background: #f0f0f0;
}
.linha_producao {
width: 200px;
height: 3px;
background: #006633;
}
.center_amarelo {
border-radius: 50%;
height: 25px;
width: 25px;
border: 3px solid #d3a900;
background-color: #FFCC00;
box-shadow: inset 10px -10px 10px #BA9500, inset 3px 3px 5px #FFCC00;
}
.center_verde {
border-radius: 50%;
height: 25px;
width: 25px;
border: 3px solid #006633;
background-color: #009424;
box-shadow: inset 10px -10px 10px #070, inset 3px 3px 5px #00f205;
}
.center_botao_verde {
height: 20px;
width: 70px;
border: 2px solid #006633;
background-color: #009424;
box-shadow: inset 10px -10px 10px #070, inset 3px 3px 5px #00f205;
}
.center_botao_amarelo {
height: 20px;
width: 70px;
border: 2px solid #006633;
background-color: #009424;
box-shadow: inset 10px -10px 10px #070, inset 3px 3px 5px #00f205;
}
.p1 {
font-family: verdana;
font-size: 11px;
text-align: center;
font-weight: bold;
color: red;
}
.p2 {
font-family: verdana;
font-size: 9px;
text-align: center;
color: grey;
font-weight: bold;
}
.p3 {
font-family: verdana;
font-size: 9px;
text-align: center;
color: white;
font-weight: bold;
}
.espaco_circulo {
width: 114px;
height: 0px;
background: #000;
}
