JavaScript Progress Bar with Percentage

JavaScript Progress Bar with Percentage
Code Snippet: Progress Bar (pure JavaScript) -function closure in js
Author: Ahmed Elghandour
Published: January 17, 2024
Last Updated: January 22, 2024
Downloads: 7,393
License: MIT
Edit Code online: View on CodePen
Read More

This lightweight JavaScript code snippet helps you to create a progress bar with percentages. It uses custom HTML tags for the progress bar and JavaScript interval function to fill the background color with a smooth transition. Likewise, it displays a number counting effect for percentage values.

This progress bar is the best fit for mobile-friendly projects as it comes with a small size of JS. The progress bar size, color, and thickness can be customized according to your needs by changing CSS values.

How to Create JavaScript Progress Bar with Percentage

1. In order to create a custom progress bar with percentages, we need three elements in HTML. So, create a div element with the class name “parent” and place another div element inside it with the class name “child”. Similarly, create a span element just after the parent element and define its class name “prog” that will hold the percentage values of the progress bar. Wrap all these elements into a div element and define its class name “container”. So, the complete HTML structure for the progress bar is as follows:

 <div class="container">
   <h1>Progress Bar (pure JavaScript)
  <br> "application on function closure in js"</h1>
    <div class="parent">
        <div class="child"></div>
    </div>
     <button class="clk">click</button>
        <span class="prog">0%</span>
</div>

2. After that, style the progress bar using the following CSS styles. You can also set the custom values for CSS attributes in order to customize the progress bar.

* {
    margin: 0;
    border: 0;
    padding: 0;
    font-family: sans-serif
}

.container {
    width: 70%;
    max-width: 800px;
    margin-top: 50px;
    margin-left: 50px;
    position: relative
}

.parent {
    width: 100%;
    background-color: #c1c1c1;
    height: 30px;
    margin-top: 25px;
    margin-bottom: 20px
}

.child {
    width: 0%;
    background-color: #53b453;
    height: 100%
}

.clk {
    padding: 10px 20px;
    font-size: 20px;
    color: white;
    background-color: #53b453;
    cursor: pointer
}

.clk:hover {
    background-color: #c1c1c1;
}

.prog {
    position: absolute;
    display: block;
    right: 0
}

@media screen and (max-width: 700px) {
    .container{
        text-align: center;
        margin:auto;
        margin-top: 40px
    }
    h1{
        font-size: 20px
    }
    .prog{
        bottom: 20px
    }
}

3. Finally, add the following JavaScript code to functionalize the progress bar with percentages.

var child = document.getElementsByClassName("child")[0],
    clkBut = document.getElementsByClassName("clk")[0],
    progSpan = document.getElementsByClassName("prog")[0];

//*************************

var q = (function () {
    var width = 0;

    return function () {
        var x = setInterval(function () {
            if (width === 100) {
                clearInterval(x);
            } else {
                width++;
                child.style.width = width + "%";
                progSpan.innerHTML = width + "%";
            }
        }, 15);
    }
})();
clkBut.onclick = q;

That’s all! hopefully, you have successfully integrated this JavaScript progress bar with a percentage code snippet into your project. If you have any questions or facing any issues, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X