Animated Progress Bar without Images

September 3, 2008 - 11 comment(S) 56,708 views

RATE IT (Rated 4 by 75 people)

Look at below progress bars

These don't contain any images. They all are pure JavaScript based progress bars. They uses the JavaScript Timer Class for the delay and jQuery fading function transparency for animated effect. To add a progress bar to the page is very easy, just add include the ProgressBar class and add following code:

var bar1 = new ProgressBar("progressContainer1", 10, 
  "progressTable", "cell1", "size");
bar1.Start();

First parameter is the ID of the div which will contain the progress bar. Second parameter is number of cells you want to have in progress bar. Third is the css class for outer table of the progress bar. Fourth is the the css class for each celll and fifth the the css class for the size of each cell.

Here is the code for the whole example and this is the link to the live demo.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Animated Progress Bar without images</title>
    <script src="jquery.js" type="text/javascript"></script>
    <style media="screen" type="text/css">
        .progressTable
        {
            border: solid 1px #e1e1e1;
        }
        .size, .cell1, .cell2, .cell3
        {
            width: 15px;
            height: 15px;    
        }
        .cell1
        {        
            background-color: #22dd22;
            display: none;
        }
        .cell2
        {        
            background-color: #dd2222;
            display: none;
        }
        .cell3
        {        
            background-color: #2222dd;
            display: none;
        }
    </style>
    <script language="javascript">
    <!--
    $(document).ready(function()
    {
        var bar1 = new ProgressBar("progressContainer1", 10, 
          "progressTable", "cell1", "size");
        bar1.Start();
        var bar2 = new ProgressBar("progressContainer2", 10, 
          "progressTable", "cell2", "size");
        bar2.Start();
        var bar3 = new ProgressBar("progressContainer3", 10, 
          "progressTable", "cell3", "size");
        bar3.Start();
    });
    var ProgressBar = function(divId, cellCount, tableCss, cellCss, sizeCss)
    {
        var index = -1;
        var timerObj = new Timer();
        this.Init = function()
        {
            var str = "<table class='" + tableCss + "' cellpadding='0' cellspacing='1'><tr>";
            for(var cnt=0; cnt<cellCount; cnt++)
            {
                str += "<td class='" + sizeCss + "'><div class='" 
                  + cellCss + " " + cellCss + cnt + "'></div></td>";
            }
            str += "</tr></table>";
            $("#" + divId).append(str);
            timerObj.Interval = 100;
            timerObj.Tick = timer_tick;
        }
        this.Start = function()
        {
            this.Init();
            timerObj.Start();
        }
        function timer_tick()
        {
            //debugger;
            index = index + 1;
            index = index % cellCount;
            $("#" + divId + " ." + cellCss + index).fadeIn(10);
            $("#" + divId + " ." + cellCss + index).fadeOut(500);
        }
    }
    // Declaring class "Timer"
    var Timer = function()
    {        
        // Property: Frequency of elapse event of the timer in millisecond
        this.Interval = 1000;
        // Property: Whether the timer is enable or not
        this.Enable = new Boolean(false);
        // Event: Timer tick
        this.Tick;
        // Member variable: Hold interval id of the timer
        var timerId = 0;
        // Member variable: Hold instance of this class
        var thisObject;
        // Function: Start the timer
        this.Start = function()
        {
            this.Enable = new Boolean(true);
            thisObject = this;
            if (thisObject.Enable)
            {
                thisObject.timerId = setInterval(
                function()
                {
                    thisObject.Tick(); 
                }, thisObject.Interval);
            }
        };
        // Function: Stops the timer
        this.Stop = function()
        {            
            thisObject.Enable = new Boolean(false);
            clearInterval(thisObject.timerId);
        };
    };
    //-->
    </script>
</head>
<body>
    <div id="progressContainer1">
    </div>
    <br />
    <div id="progressContainer2">
    </div>
    <br />
    <div id="progressContainer3">
    </div>
</body>
</html>

11 comment(S)

binaryelves on Sep 4, 2008 09:01 AM

Hi,

Did you notest how much CPU this kind of javascript effects loops take?
Answer: a lot ;))) Take a look in Task Manager on your CPU load and then open in browser this article. You will see what I mean.

Beside that nice script :)

Greetz!

jesusvld on Sep 4, 2008 09:01 AM

Excellent work!!! Thnx for share.

Visual C# Kicks on Jan 17, 2009 11:48 PM

It looks really cool at least

Jack on Oct 20, 2009 06:47 PM

cool! i like it!

sgs on Apr 17, 2010 01:03 AM

gsdfgs

Jeykeu on Mar 31, 2011 06:47 AM

Aint images better than loops!!!!!
you bet!

jksh on Apr 19, 2011 04:37 AM

Bessie on Aug 16, 2011 01:18 PM

How do you get it to stop?

bar1.Start() got it started all right.

Calling bar1.Stop() immediately thereafter had no effect. I'm using Firefox V5.0.1 if it makes a difference.

Bessie on Aug 18, 2011 08:27 AM

Oops!

The timer function has a Stop method, but the ProgressBar does not. To stop the progress bar and remove the div that it's in, I added this member to ProgressBar:
var progressDivId = divId;
And added this method:
this.Stop = function()
{
timerObj.Stop();
$('#' + progressDivId).remove();
}

pielover on Aug 2, 2015 02:56 PM

This causes a lot of wasteful CPU usage, so I'm going to stick to CSS animations or GIFs. Looks great though, just not practical.