Question

0

227

Vistas

Función para determinar tres valores procentuales entre sí - Progressbar [Javascript]

Tengo un problema que parece que no puedo solucionar.

He creado una barra de progreso en una aplicación Symfony con Bootstrap instalado. Estoy usando el siguiente código para mostrar la barra:

 <link href="https://bootswatch.com/5/sketchy/bootstrap.min.css" rel="stylesheet"/> <div class="progress"> <div style="width:100%" class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar"></div> <div style="width:100%" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"></div> <div style="width:100%" class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar"></div> </div>

Quiero superponer las barras para mostrar tres valores diferentes. Así por ejemplo:

Bar1 debería mostrar un 50% de progreso
Bar2 debería mostrar un 75% de progreso (el 50% de Bar1 + 25% propio)
Bar3 debería mostrar un 100 % de progreso (el 50 % de Bar1 + 25 % de Bar2 + 25 % propio)

Entonces eso se puede lograr con la siguiente configuración:

Barra1: 200 % de ancho
Barra2: 100% ancho
Barra3: 100% ancho

 <link href="https://bootswatch.com/5/sketchy/bootstrap.min.css" rel="stylesheet"/> <div class="progress"> <div style="width:200%" class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar"></div> <div style="width:100%" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"></div> <div style="width:100%" class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar"></div> </div>

Pero, ¿cómo mostraría, por ejemplo, lo siguiente:

Barra 1: 30% de progreso
Barra2: 70% de progreso
Barra3: 100% de progreso

Necesito una función para determinar el ancho de las tres barras para mostrar mis valores deseados. Entonces podría agregar el valor de ancho a través de javascript.

about 4 years ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-03T01:35:46.843Z

 document.getElementById("red").style.width = "30%"; document.getElementById("green").style.width = "70%"; document.getElementById("blue").style.width = "100%";

 <link href="https://bootswatch.com/5/sketchy/bootstrap.min.css" rel="stylesheet"/> <div class="progress"> <div id="red" style="width:100%" class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar"></div> <div id="green" style="width:100%" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"></div> <div id="blue" style="width:100%" class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar"></div> </div> <script type="text/javascript" src="script.js"></script>

Algo como ??

Answer 2 · 2022-07-03T01:35:46.851Z

La siguiente función setWidth() cambiará automáticamente el ancho. Simplemente pase sus valores deseados como argumentos. No necesitas hacer nada. Simplemente llame a esta función así => setWidth(30, 70, 100)

 function setWidth(...arg) { let widths = Array.from(document.querySelectorAll('.progress>div')) .forEach((el, i) => el.style.width = (arg[i] - (arg[i - 1] ? arg[i - 1] : 0)) + "%") } setWidth(30, 70, 100)

 <link href="https://bootswatch.com/5/sketchy/bootstrap.min.css" rel="stylesheet" /> <div class="progress"> <div style="width:100%" class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar"></div> <div style="width:100%" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"></div> <div style="width:100%" class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar"></div> </div>

0

227

Función para determinar tres valores procentuales entre sí - Progressbar [Javascript]

2 Respuestas

0

0

Encuentra empleos remotos

Andres GPT