0

Buenas tengo un progress bar de bootstap 3.

  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="70" style="width: 70px"> </div>
  </div>

Mi idea es que tengo un count que me saca el numero total de pedidos que hay en la bd. Luego tengo otro count con los pedidos que tienen un estado de pichado = 1.

Entonces mi idea es que el valor total de el progress bar sea el primer count, y la barra de progreso sea sea el segundo count. De este modo la barra de progreso su valor seria por ejemplo 150 pedidos pero solo pinchados =1 70 pedidos.

No se si se puede hacer un progress-bar donde ponga cada valor en su sitio, ya que las progress-bar que encuentro el tamaño va en relación a un width: % .

Alguna sugerencia de como hacerlo?? gracias

1 respuesta 1

0

Regla de tres.

var total=150;
var pichado =70;
var porcentaje=(pichado *100)/total;
document.getElementById("barra").style.width=porcentaje+"%";
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress">
  <div class="progress-bar" id="barra"> </div>
</div>

6
  • Hola gracias por tu respuesta @HERRERA , pero eso es javascript no, como meto la variable de php ahí? gracias
    – Miguel
    Commented el 24 abr. 2020 a las 18:53
  • Puedes hacer la misma ecuacion count2*100/count1 y ponerla en el estilo del width,
    – HERRERA
    Commented el 24 abr. 2020 a las 18:58
  • No se como hacerlo, puedes mostrar un ejemplo con php gracias @HERRERA
    – Miguel
    Commented el 24 abr. 2020 a las 18:59
  • style="width:<?= $calculo ?>%">, ahora la variable "calculo" es la regla de 3 de tus datos
    – HERRERA
    Commented el 24 abr. 2020 a las 19:05
  • No lo entiendo, puedes modificar la respuesta por favor @HERRERA ?
    – Miguel
    Commented el 24 abr. 2020 a las 19:09

Tu Respuesta

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

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