Teste

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.![imagem](https://forum.imasters.com.br/monthly_2017_06/STATUS.jpg.a4395a886476284eef2724a14b252186.jpg) 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? ``` Teste

Pedido
Realizado

Ord. Produção
Criada

Em
Produção

Elétrica e
Testes

Pintura

Embalagem

Pronto para
Entrega

Data: 02/06/2017
Hora: 10:55

Data: 02/06/2017
Hora: 14:35

Data: 04/06/2017
Hora: 19:00

Data: 21/07/2017
Hora: 14:35

Data: 24/07/2017
Hora: 16:22

Data: 02/06/2017
Hora: 14:35

Previsão
05/08/2017

Completo

``` 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; } ```

brunobonato

Status do pedido