Suponga que está preparando datos tabulares sobre ciertos datos. Por lo tanto, se utiliza un gráfico de barras para representar los datos de forma gráfica para una mejor ayuda visual. Los datos pueden variar desde la edad de un grupo de personas hasta un determinado rango, notas de un alumno en una determinada materia.
Planteamiento: Estaremos creando la barra de progreso HTML cuyo valor inicial es 10%. Diseñaremos la barra de progreso en varios colores y patrones. Luego, crearemos el código JavaScript para la barra de progreso.
Código de implementación:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
.bar {
width: 500px;
height: 80px;
background-color: aquamarine;
border-radius: 100px;
display: flex;
align-items: center;
}
.progress {
width: 467px;
width: 50px;
height: 50px;
background-color: grey;
border-radius: 100px;
margin-left: 17px;
}
.percentage {
position: absolute;
margin-left: 30px;
font-weight: bold;
}
input {
margin-bottom: 30px;
}
</style>
</head>
<body>
<h3>
Enter a number between 1
and 100 for progress
</h3>
<input type="number" min="0" max="100">
<div class="bar">
<div class="progress">
</div>
<div class="percentage">0%</div>
</div>
<script>
const input = document.querySelector('input');
const progress = document.querySelector('.progress');
const percentage = document.querySelector('.percentage');
console.log(progress)
let percentComplete = 0;
input.onchange = function () {
percentComplete = input.value
console.log(percentComplete);
progress.style.width =
`${percentComplete / 100 * 417 + 50}px`;
percentage.innerHTML = `${percentComplete}%`;
};
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por neeraj kumar 13 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA