0
213
VistasHaz un gráfico de barra/progreso con JS y CSS
Si tengo datos como los que se muestran en la parte superior de la imagen. ¿Es posible hacer un diagran como este (imagen), con JS puro, CSS y HTML? No sé cómo se llama un diagrama/gráfico como este. ¡Cualquier ayuda es muy apreciada!
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
No necesitas JavaScript.
Pase un CSS var() de HTML a CSS y use calc() para obtener los porcentajes
Usar degradado lineal de fondo
.progress { background: green; height: 2em; background: linear-gradient(to right, green calc(var(--val) * 10%), red calc(var(--val) * 10%)); background-size: 100%; } <div class="progress" style="--val:1"></div><br> <div class="progress" style="--val:7"></div><br>Usando el pseudo elemento CSS ::before
.progress { background: red; height: 2em; } .progress::before { content: ""; display: block; height: inherit; background: green; width: calc(var(--val) * 10%); } <div class="progress" style="--val:1"></div><br> <div class="progress" style="--val:7"></div><br>
·
Juan Pablo Isaza
Denunciar
0
El enfoque más sencillo es usar un elemento secundario absolutamente posicionado en un elemento principal relativamente posicionado y establecer su ancho como el progreso.
function setProgress(percent) { const range = document.querySelector('.range'); const progress = range.querySelector('.progress'); progress.style.width = `${percent}%` } setProgress(70); .range { position: relative; height: 20px; background-color: #ed3a23; border: 2px solid #000; box-sizing: border-box; overflow: hidden; } .progress { position: absolute; left: 0; top: 0; width: 0; height: 100%; background-color: #4db24c; border-right: 3px solid #000; } <div class="range"> <div class="progress"></div> </div>
·
Juan Pablo Isaza
Denunciar
0
Aquí está HTML y CSS puro
.bar-wrap { display: flex } .col { display: block; text-align:center; width: var(--size) } .bar { height: 50px; width: 100%; border: 3px solid #000; background: var(--background) } .cgreen { color: green } .cred { color: red } <div class="bar-wrap"> <div class="col cgreen" style="--size:70%;"> <h3 class="heading">Correct</h3> <div class="bar" style="--background:green"></div> <p class="label">70%</p> </div> <div class="col cred" style="--size:30%;"> <h3 class="heading">Wrong</h3> <div class="bar" style="--background:red"></div> <p class="label">30%</p> </div> </div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta