Simple Javascript Progress Bar With Percentage (Free Download)

Welcome to a tutorial on how to create a progress bar with Javascript. Looking to add some nice “now processing” visuals to your website? We can use the HTML <progress> tag to create a very simple fuss-free progress bar:

<style>
#demo { -webkit-appearance: none; }
::-webkit-progress-bar { background: gray; }
::-webkit-progress-value { background: orange; }
::-moz-progress-bar { background: orange; }
</style>

<progress id="demo" max="100" value="50">50%</progress>
<script>document.getElementById("demo").value = 70;</script>

But as you can see, they are not really customizable at the time of writing, nor does it have a percentage indicator. Read on if you want a “better custom progress bar”!

 

 

TABLE OF CONTENTS

 

 

PROGRESS BAR DEMO

<!-- (A) CSS + JS -->
<link rel="stylesheet" href="progress-bar.css">
<script src="progress-bar.js"></script>
 
<!-- (B) EMPTY DIV -->
<div id="demo"></div>
 
<!-- (C) CREATE PROGRESS BAR -->
<script>
let mybar = pb(document.getElementById("demo"));
mybar.set(30);
</script>

For you guys who just want to use this as a “plugin” without reading the entire tutorial:

1. Captain Obvious, load the CSS and Javascript.
2. Create an empty <div> to generate the progress bar. I have created a few simple themes, just attach class="code | blue | dracula | banana | rainbow"… Or feel free to create your own theme.
3. On window load, use var mybar = pb(TARGET) to create the progress bar. Then, call mybar.set(PERCENTAGE) to set the percentage whenever you want.

 

EXAMPLE CODE DOWNLOAD

Click here to download. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

 

 

TUTORIAL VIDEO

 

PART 1) THE JAVASCRIPT

function pb (instance) {
  // (A) ADD PROGRESS BAR HTML & CSS
  instance.classList.add("pb-wrap");
  instance.innerHTML =
    `<div class="pb-bar"></div>
    <div class="pb-percent">0%</div>`;
  instance.hbar = instance.querySelector(".pb-bar");
  instance.hpercent = instance.querySelector(".pb-percent");
  
  // (B) SET PROGRESS
  instance.set = percent => {
    instance.hbar.style.width = percent + "%";
    instance.hpercent.innerHTML = percent + "%";
  };
  
  // (C) RETURN RESULT
  return instance;
}

That’s right, there is only one pb() function in Javascript. All this does is create the necessary HTML and CSS classes to create the progress bar. What drives the progress bar to move is actually the CSS, by setting the percentage width – See below.

 

 

PART 2) PROGRESS BAR HTML

Here is what a “complete” progress bar looks like, after the above Javascript inserts all the HTML and CSS.

<div id="demo" class="pb-wrap">
  <div class="pb-bar"></div>
  <div class="pb-percent">0%</div>
</div>

• <div id="demo"> is the original container, we only added a .pb-wrap CSS class to it; This will act as the “background” of the progress bar.
• <div class="pb-bar"> is the “actual progress bar” sitting on top of the background. Remember the above set() function? Yep, we are literally just playing with width: X% on this to move the progress bar.
• Lastly, <div class="pb-percent"> is the percentage indicator.

 

PART 3) PROGRESS BAR CSS

/* (A) SHARED */
.pb-wrap, .pb-wrap * { box-sizing: border-box; }
.pb-wrap, .pb-percent { width: 100%; }
.pb-wrap, .pb-bar, .pb-percent { height: 30px; }
 
/* (B) STACK BACKGROUND-BAR-PERCENTAGE */
.pb-wrap { position: relative; }
.pb-bar, .pb-percent { position: absolute; }
.pb-wrap { z-index: 1; }
.pb-bar { z-index: 2; }
.pb-percent { z-index: 3; }

/* (C) WRAPPER */
.pb-wrap { 
  max-width: 400px; /* optional */
  background: #f2f2f2;
}

/* (D) BAR */
.pb-bar {
  background: #d3deff;
  transition: width 0.5s;
}

/* (E) PERCENTAGE */
.pb-percent {
  display: flex;
  align-items: center;
  justify-content: center;
}

This may be slightly intimidating to beginners, but a quick walkthrough:

1. We “synchronize” the height for the background, bar, and percentage display.
2. Stack the containers in order – .pb-wrap below, .pb-bar center, .pb-percent on top.
3. Cosmetics for the background layer.
4. Cosmetics for the progress bar.
5. Cosmetics for the percentage display… Practically just centering it.

 

 

 

DISPLAY THE NUMBER OF ASSETS, BYTES, WHATEVER ELSE.

// (C) SET PROGRESS
instance.set = bytes => {
  let percent = parseInt((bytes / TOTAL) * 100);
  instance.hbar.style.width = percent + "%";
  instance.hpercent.innerHTML = `${bytes} of TOTAL`;
};

Modify progress-bar.js, instance.set().

• Calculate the percentage, then set instance.hbar.style.width accordingly.
• As you can see, instance.hpercent.innerHTML can be whatever text you want to put.

 

 

COMPATIBILITY CHECKS

• Arrow Functions – CanIUse
• CSS transition – CanIUse
• Flexbox – CanIUse

This example runs on all modern “Grade A” browsers.

 

LINKS & REFERENCES

• CSS Transition – MDN
• HTML Progress – MDN
• Need a more robust progress bar? Check out LoadingBar.js