Creating a Progress Bar Using CSS and JavaScript

I wanted before talking about this progress bar to create an understandable and simple code. This progress bar is not at all linked to a server side running program like an upload file application or any kind of Web application using a progress bar. The purpose here is roundly to show how we can mold a good HTML structure with a nice design using CSS and a simple JavaScript code to assume progress bar command.
First, let’s get to structure.

HTML

<div class="progress-bar" >
    <div id ="sample" class="bar">75%</div>
</div>
<div id ="percentage"></div>

This is so easy to understand as we have 2 div tags. The first one (.progress-bar) is a sort of progress bar container and the second one (#percentage) is created to show the current percentage during the time that the progress bar is running.

Now let’s get into the meat of the CSS

CSS

/*Container*/
.progress-bar {
    border: 1px solid #56577A;
    /*width of the progress bar container*/
    width: 200px;
    margin: 5px;
    padding: 1px;
    background: #fff;
    float: left;
}

/*Progress Bar*/
.bar {
    height: 15px;
    font-size: 11px;
    /* indent the text off the screen as we don’t want to see the text anymore.*/
    text-indent:-9000px;
}

Finally let’s go through the JavaScript snippet we have used.

Here how our code looks like in the HTML code:

<script src="progressbar.js" type="text/javascript"></script>

<script type="text/javascript">
    window.onload = function() {initialize()}
</script>

As soon as the whole page is loaded the initialize function is called. This JavaScript function resides in progressbar.js.

JavaScript

function initialize() {
    divId = 'sample';
    thedivId = document.getElementById(divId);
    var percentage = thedivId.innerHTML;
    //Set the Progress Bar color
    thedivId.style.backgroundColor="#BF5852";
    brim(divId,0,parseInt(percentage.substr(0, percentage.length-1)));
}

The initialize function recovers the progress bar identified by the 'sample' ID as well as its percentage (in our case 75%). The recovered percentage (String) will after be cast to Int and proceed to the brim function with two other variables (before casting the percentage variable, we use the substr function to stamp out ‘%’).

Those variables are divId and the ‘start’ variable which specifies the percentage from which the progress bar should start --in this case the value of the start variable is 0 (0%).

Thanks to the brim recursive function (Timeout to call itself every 50ms), we will be able to let our progress bar to move on until it reaches the percentage we have set previously.

In the meanwhile setWidth function continues to update the width property of the progress bar.

JavaScript

function brim(Id,start,percentage) {
    if (document.getElementById) {
         o = document.getElementById(Id);
             if (start <= percentage) {
                setWidth(o, start);
                start += 1;
                //Show progression percentage near the progress bar
                document.getElementById('percentage').innerHTML = (start -1) + "%";
                window.setTimeout("brim('"+Id+"',"+start+","+percentage+")", 50);
             }
   }
}

function setWidth(o, start) {
    o.style.width = start+"%";
}

Hope you enjoy this post. Every comment either to improve or criticize my code is welcome.

View Demo

Download Here

How to encourage this blog if you like it:

• Promote our sponsors;
• Add any kind of comment or critic;
• Ask me directly by email if you prefer.

Just do something like that, and I will have the huge pleasure to continue posting the best of the creativity I have.

Share this post ?

---