Simple HTML Progress Bar using CSS3 and JavaScript

Since Silverlight is such a good technology to build very beautiful applications but since not all users have Silverlight installed, and to avoid any reason for a user to run away from the  site I have to make some Silverlight to HTML conversions.

So one of those is a simple Progress Bar that I need in HTML.

While searching the internet I’ve found some interesting example but a bit complicated for what I have in mind and I thought this should not be so complicated after-all.

The Progress Bar:

Here is the video for this with a bit more explination:

I need tow containers , one is the progress bar container and another one is the fill, one script that will take the id’s of those containers, get the current value for which we need to set the progress.

I used 2 div’s for this and fill them with a gradient color, and a bit of JavaScript logic to calculate the width of the fill area.

The Html looks like this:

  <div id="progresBarContainer" class="progressBarContainerClass">
        <div id="progresBarFill" class="progressBarClass">
    <input type="text" id="inputText" />
    <input type="button" onclick="setValue()" />

The classes of the elements look like this:

 height: 25px;
 width: 250px;
 border: 1px solid black;
 border-radius: 3px 3px 3px 3px;
 -moz-border-radius: 3px 3px 3px 3px;
 -webkit-box-shadow: 0px 0px 5px #999;
 -moz-box-shadow: 0px 0px 5px #999;
 box-shadow:0px 0px 3px 1px rgba(0,0,0,0.3);
 background: -webkit-gradient(linear, center top, center bottom, color-stop(0.2, #D8D6D5), color-stop(0.8, #999999));
 background: -moz-linear-gradient(top, #D8D6D5 20%, #999999 80%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D8D6D5', endColorstr='#999999');
 display: inline-block;
 border: 1px solid none;
 height: 100%;
 border-radius: 2px 2px 2px 2px;
 -moz-border-radius: 2px 2px 2px 2px;
 background: -webkit-gradient(linear, center top, center bottom, color-stop(0.2, #514BF2), color-stop(0.8, #5142BF));
 background: -moz-linear-gradient(top, #514BF2 20%, #5142BF 80%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#514BF2', endColorstr='#5142BF');

And the script that will control this is split in tow parts:

  • in one script we instantiate the ProgressBar object and pass in the id of the tow main elements and the limits in witch the progress bar will operate and start the animation to the calculated value.
 function setValue() {
            var progressBar = new ProgressBar("progresBarContainer", "progresBarFill", 0, 100);
            var currentValue = $("#inputText").val();
            var progressWidth = progressBar.GetWidth(currentValue);
            progressBar.fillElement.animate({ width: progressWidth }, 500, "easeOutCubic", null);
  • and the script that contains the ProgressBar object and makes the calculation.
function ProgressBar(idContainer, idFill, minValue, maxValue) {
    //case 1 from minus to plus
    //case 2 from minus to minus
    //case 3 from plus to plus 
    //case 1,2 are not treated here 

    this.maxValue = maxValue;
    this.minValue = minValue;
    this.idContainer = idContainer;
    this.width = $("#" + idContainer).width();
    this.fillElement = $("#" + idFill);

    this.GetWidth = function (currentValue) {
        ///		Calculate the progressBarFill width

        //currentValue is smaller or equal to 0
        if (currentValue <= this.minValue) {
            return this.minValue * (this.width / 100); ;

        //currentValue is smaller then maximum
        if (currentValue < this.maxValue) {
            return currentValue * (this.width / 100);
        } //currentValue is bigger then maximum
        else {
            return this.maxValue * (this.width / 100);

And this is it 🙂

Here is one way that you can structure this in you’re project.

And here is the result. 🙂

  1. #1 by Elliott Greaves on June 14, 2011 - 4:05 pm

    Hi I watched your tutorial on youtube, the progress bar really worked but I have another question.
    Is there a way to for javascript to read the file size of what is being loaded so you can accurately display the load time?


  2. #3 by Naomi on July 12, 2011 - 4:47 pm

    Hi, great post but I dont understand how I link this to a video that is loading.

    • #4 by diaconu13 on July 13, 2011 - 10:21 am

      In the response that i’ve give earlier is treated the same problem ( -Example ) a video is a file after all and the download progress can be visualized using Html 5 File Api. But don’t confuse this wit streaming witch is a different story.

  3. #5 by Buju on July 31, 2013 - 10:29 am

    It is great but not working in IE 10. some compatibility issue

  4. #6 by John on August 8, 2013 - 5:24 pm

    This didnt work for me i even copied/pasted it !!!!!!!!!!!!!!!!!!!!!!!!!!
    im fucking getting sick to do death of things not working for me technology is absolute bullshit i fucking want to smash the lot up

    • #7 by diaconu13 on August 8, 2013 - 6:11 pm

      Well it might be that this is obsolete… I will,consider deleting this post … This was made some time ago … I did not check again to see if is working ok now but provided as much info as possible to be as simple as possible. Thanks for your input, sorry that you have to waste time on this.

    • #8 by diaconu13 on March 14, 2016 - 9:30 am

      Hi John .. i know my answer is very late but the advice is a actual as possible . When you see things on any blog , make sure you look at the date that they have been posted, some things may have expired by now and thech is changing all the time. Thanks!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: