Indicadores de progreso animados con vanilla JavaScript y CSS

Vista prévia

Descripción

Ayuda a visualizar el valor porcentual en una barra indicadora animada, realizada con JavaScript HTML5, CSS y Vanilla.

Funcionamiento

Especifique el porcentaje para el indicador de progreso utilizando el atributo de datos-porcentaje de HTML5.

<div class="progress-bar" data-percent="50%">

<span class="progress-bar__slide"></span>

<span class="progress-bar__percent"></span>
</div>

Estilo del indicador de progreso.

.progress-bar {

overflow: hidden;

position: relative;

width: 100%;

height: 1.4rem;

display: block;

margin: 10vh auto;

background: rgba(0,0,0,0.1);
}

.progress-bar__slide {

position: absolute;

top: 0;

left: 0;

bottom: 0;

display: block;

background-image: repeating-linear-gradient(
45deg,
#ccc,
#ccc 10px,
#eee 10px,
#eee 20px
);

width: 2px;

transition: 2s cubic-bezier(.57, .12, .35, 1.2);
}

.progress-bar__percent {

z-index: 500;

display: block;

padding: 0 10px;

font-family: 'verdana';

font-size: 12px;

text-align: center;

line-height: 1.4rem;

color: white;

position: absolute;
}

El JavaScript para activar el indicador de progreso.

setTimeout(function() {

var bars = document.getElementsByClassName('progress-bar');

for (var i = 0; i < bars.length; i++) {


bars[i].children[0].style.width = bars[i].dataset.percent;


bars[i].children[1].innerHTML = bars[i].dataset.percent;

};
}, 0);