|
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>
|