Necesito hacer una barra de progreso de este estilo:
He encontrado varios tipos de barras de progreso hechas copn php css y tal, pero no es lo que necesito, no necesito una barra de carga, si no una barra como la de la foto. Cual sería la forma más correcta de hacerlo.
La idea es que tenga unos pasos para consultar el estado de un pedido, por ejemplo:
- Presupuesto hecho
- Presupuesto aceptado
- Reparando
- Reparado
- Enviado
- Recibido
A mi se me ocurre hacerlo con imágenes o con cambios de fondo según el estado, pero para estilizarlo un poco con esos ticks y esos circulos no sé como hacerlo realmente. Alguna idea?
Algo así me puede servir:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Dynamic Progress Bar</h2>
<div class="w3-progress-container">
<div id="myBar" class="w3-progressbar w3-green" style="width:1%"></div>
</div>
<br>
<button class="w3-btn w3-dark-grey" onclick="move()">Click Me</button>
</div>
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 20);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
</body>
</html>
Pero necesitaría pasar el número según el estado a la funcion de jquery y que la barra se quede en un % que corresponda a ese número.
Tracking