Simple Javascript Progress Bar With Percentage (Free Download)

Welcome to a tutorial on how to create a simple progress bar using pure Javascript. Looking to add some nice “now processing” visuals onto your website? Not too keen on adding to the loading bloat with progress bars that require 3rd party frameworks? Well, let us walk through how to create a fuss-free laughably easy progress bar in this guide – Read on to find out!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

TABLE OF CONTENTS

 

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

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

 

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>
// (C1) GENERATE PROGRESS BAR
let mybar = progbar(document.getElementById("demo"));
 
// (C2) SET PERCENTAGE
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.
3. On window load, use var mybar = progbar(TARGET) to create the progress bar. Then, call mybar.set(PERCENTAGE) to set the percentage whenever you want.

 

 

 

PART 1) THE JAVASCRIPT

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

That’s right, there is only one progbar() 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="prog-wrap">
  <div class="prog-bar"></div>
  <div class="prog-percent">0%</div>
</div>

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

 

PART 3) PROGRESS BAR CSS

/* (A) PROGRESS BAR WRAPPER */
.prog-wrap * {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
.prog-wrap {
  position: relative;
  border: 1px solid #acb2d8;
  max-width: 400px; /* optional */
}
.prog-wrap, .prog-bar, .prog-percent { height: 30px; }

/* (B) PROGRESS BAR & PERCENTAGE */
.prog-bar, .prog-percent {
  position: absolute;
  top: 0; left: 0;
}

/* (C) PERCENTAGE INDICATOR */
.prog-percent {
  display: flex;
  align-items: center; justify-content: center;
  width: 100%;
  z-index: 2;
}

/* (D) PROGRESS BAR */
.prog-bar {
  width: 0;
  background: #ced6ff;
  transition: width 0.5s;
}

Now that you know all the dark secrets behind the progress bar, this one should not be a surprise… All we are doing in the CSS is position .prog-bar and .prog-percent nicely, set their dimensions nicely. The rest is pretty much cosmetics.

 

 

 

NATIVE HTML PROGRESS BAR

<progress id="upload" max="100" value="70">70%</progress>

For you guys who are still thinking that the Javascript is too much, there is actually a native HTML <progress> tag. But at the time of writing, it is not really customizable with CSS.

 

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
• Example on CodePen – JS Progress Bar