0

Estoy intentando hacer una barra de progreso, que tenga por ejemplo un limite de capacidad de 4000. En lo cual llenaría ese progreso con un count de una consulta de SQL. El tema es que no se como hacerlo, importe de bootstrap el siguiente codigo:

<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width:50%">'.$resultado['Count'].'</div>
</div>

la variable trae el numero de una consulta SQL, eso no hay problema, el tema es como hago para que calculo el numero por ejemplo 4000 como 100%? y ponerlo en el width?

Si pudieran guiarme por donde debería investigar o como hacerlo, agradecería mucho

2

1 respuesta 1

0

Puedes asignar a aria-valuemax el valor del resultado de tu consulta. Como tú indicas en este caso 4000.

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="4000"></div>
</div>

Luego, la documentación indica:

"El .progress-bar requiere un estilo en línea, una clase de utilidad o CSS personalizado para establecer su ancho."

Entonces el width tiene que ser dinámico de acuerdo a tu valor de la consulta SQL que ya lo pusiste en aria-valuemax y al valor que está en curso "completado" de progreso.

$('.progress-bar').each(function() {
  let min = $(this).attr('aria-valuemin');
  let max = $(this).attr('aria-valuemax');
  let now = $(this).attr('aria-valuenow');
  let siz = (now-min)*100/(max-min);
  $(this).css('width', siz +'%');
});
1
  • leyendo mi duda nuevamente, me di cuenta que lo exprese mal, el 4000 seria el 100%, el limite. El count de la consulta suele tener numeros entre 1500 y 3000, la idea es que se vea ese crecimiento en la barra como tope "4000 como 100%" Commented el 25 mar. a las 12:38

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.