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

Download & Demo How It Works Useful Bits & Links
The End

 

 

DOWNLOAD & DEMO

Firstly, here is the download link to the example code as promised.

 

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

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

 

 

HOW IT WORKS

With that, let us more into a little more detail on how the progress bar works. This section is for the guys who want to “deep customize” the progress bar.

 

PART 1) THE JAVASCRIPT

progress-bar.js
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 essentially 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

progress-bar.css
/* (A) PROGRESS BAR WRAPPER */
.prog-wrap * {
  font-family: arial, 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 to position .prog-bar and .prog-percent nicely, set their dimensions nicely. The rest is pretty much cosmetics.

 

 

USEFUL BITS & LINKS

That’s all for this project, and here is a small section on some extras and links that may be useful to you.

 

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 as at the time of writing, it is not really customizable with CSS.

 

COMPATIBILITY CHECKS

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

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

2 thoughts on “Simple Javascript Progress Bar With Percentage (Free Download)”

  1. I love the code..but I want to display the progress bar not as percentage but as no:of assets loaded/total no of assets..Can you help me?

Leave a Comment

Your email address will not be published.