Animated Progress Indicators with Vanilla Javascript and CSS

Preview:

Description:

Help you visualize percentage value into an animated indicator bar, made using html5, CSS and vanilla JavaScript.

How to use it:

Specify the percentage for the progress indicator using Html5 data-percent attribute.

<div class="progress-bar" data-percent="50%">
  <span class="progress-bar__slide"></span>
  <span class="progress-bar__percent"></span>
</div>

Style the progress indicator.

.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;
}

The JavaScript to active the progress indicator.

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);