Animated Progress Bar Web Component – progressbar.js

Preview:

Description:

A really simple Custom Element that renders a basic, animated progress bar component on your web application.

How to use it:

1. Insert the main script progressbar.js into the page.

<script src="progressbar.js"></script>

2. Add the progress bar custom element to the page.

<progress-bar></progress-bar>

3. Use this component to implement a loading bar.

(function() {
  var progress = document.querySelector('progress-bar'),
      complete = 0;
  var progressInterval = setInterval(() => {
      complete += 1;
      if (complete <= 100) {
        progress.setAttribute('complete', complete);
      } else {
        clearInterval(progressInterval);
      }
  }, 100);
})();

4. Override the default styles of the progress bar.

.progress-bar {
  width: 50%;
  height: 30px;
  background-color: #EDF2F4;
  border-radius: 5px;
  color: #FFF;
}
.progress-bar-inner {
  height: 100%;
  line-height: 30px;
  background: #2B2D42;
  text-align: center;
  border-radius: 5px;
  transition: width 0.25s;
}