Creating a Progress Bar Using CSS and JavaScript

Posted by jcargoo | Tuesday, December 23, 2008
, | 0Delicious Twitter Reddit Digg Loading...


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.




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 ?

Digg Reddit Stumble Delicious Technorati Twitter Facebook

9 Previous Comments
  1. Anonymous | December 24, 2008 at 3:09 AM  

    very very nice.Thanks to you

  2. Anonymous | December 24, 2008 at 7:43 AM  

    Interesting, but your English (and code formatting!) need a lot of work. I found it somewhat hard to follow.

  3. jcargoo | December 24, 2008 at 7:45 AM  

    Anonymous,
    I'll do my best next time :)
    Thanks!

  4. Moony | December 26, 2008 at 5:30 AM  

    Simple clear and very nice. Thanks a lot!!!!!!!!!!

  5. j0iojokml | December 28, 2008 at 1:05 AM  

    What's the point if it doesn't measure real progress ?

  6. jcargoo | December 28, 2008 at 1:21 AM  

    @j0iojokml
    The purpose as I mentioned in the article above is simply to show how a progress bar can be developed a using CSS/HTML/JS. Now for others who want to link the progress process to a server side running program (that's means to measure a real progress as you said), you have only to customize the brim function to let it listening to a running thread.

  7. Anonymous | March 9, 2009 at 7:12 PM  

    Thanks for the help.

  8. todd | May 4, 2009 at 9:42 AM  

    This is exactly what I've been looking for in a server-side application. Would you be willing to help me through the code. I am just a "weekend warrior" with HTML.

  9. Anonymous | July 21, 2009 at 3:51 AM  

    Hi! Very good...

    Can you give a sample of code of how the brim function could listen to a running thread?

    Thanks!