Animated Progress Bar Web Component – progressbar.js

Category: Javascript , Loading | January 9, 2020
Author:hing-sf
Views Total:70 views
Official Page:Go to website
Last Update:January 9, 2020
License:MIT

Preview:

Animated Progress Bar Web Component – progressbar.js

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

You Might Be Interested In:


Leave a Reply