Archive for March, 2011

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: http://www.youtube.com/watch?v=4rHa2w8Wz7k

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">
        </div>
    </div>
    <input type="text" id="inputText" />
    <input type="button" onclick="setValue()" />

The classes of the elements look like this:

.progressBarContainerClass
{
 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');
}
.progressBarClass
{
 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. 🙂

Advertisements

8 Comments