Animated Progress Indicators with Vanilla Javascript and CSS

Category: Javascript , Loading | August 27, 2015
Views Total:1,657 views
Official Page:Go to website
Last Update:August 27, 2015


Animated Progress Indicators with Vanilla Javascript and CSS


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>

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

You Might Be Interested In:

Leave a Reply