2

Necesito hacer una barra de progreso de este estilo: introducir la descripción de la imagen aquí

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:

  1. Presupuesto hecho
  2. Presupuesto aceptado
  3. Reparando
  4. Reparado
  5. Enviado
  6. 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.

3
  • Como comenta Mikel no es una barra de progreso lo que necesitas sino lo que se suele llamar "wizard" que en español se suele traducir como ... en pasos: navegación en pasos, formulario en pasos, etc. ¿Hay solo dos estados por paso o quieres que la barra entre pasos también vaya cambiando?
    – user7176
    el 15 nov. 2016 a las 9:42
  • Hay alguna manera de hacerlo sin formulario? Necesito tener 5 pasos. pendiente, aprobado, reparando, reparado, pagado y entregado. Estos estados los tengo en la base de datos. (Es decir, no tiene que ser algo dinámico, ya que el usuario no tiene que interactuar con dicha barra, esta tiene que cambiar en función de lo que ponga la base de datos. El usuario solo verá esa barra como información. Lo que viene a ser una especie de Tracking
    – Pavlo B.
    el 15 nov. 2016 a las 10:02
  • Ni tiene que ser un formulario, era solo un ejemplo. Si cada paso es una pagina distinta es como un menú normal y corriente sólo que además de decir la pagina actual hay que marcar también las anteriores. Mira los ejemplos de Mikel
    – user7176
    el 15 nov. 2016 a las 10:25

1 respuesta 1

2

Lo que tu buscas no es una "progress bar", buscas un "step wizzard".

Te pongo un ejemplo (se puede consultar el código):

http://bootsnipp.com/snippets/featured/form-wizard-using-tabs

Se que no es el modo de respuesta que se debe dar, pero si buscas por step wizzard en google tienes unas cuantas opciones (al final ya sabes que va por gustos).

En cualquier caso yo evitaría utilizar imagenes y cambios de fondo. Puede tener un efecto no deseado en la transición, además del coste de cargar imagen, no ser responsive etc etc...

Mira a ver que tal te parece esa opción.

De todas formas la pregunta hay que especificarla más. No dices que haces entre paso y paso (si haces un submit del formulario, si guardas los datos y luego subes todo, si los subes con ajax...).

PHP es el lado del servidor con PHP como tal no vas a conseguir hacer este tipo de cosas. Tendrías que buscar javascript + css + html

Un saludo

Edito: mira por ejemplo las de la galería de codepen: https://codepen.io/tag/wizard/#

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.