Estaba investigando JQuery, buscando ejemplos para compartir y encontré esta barra de progreso animada realizada en JQuery, no contiene imágenes, solamente código Javascript, HTML y CSS.
Explico un poco:
var bar1 = new ProgressBar("id-div-contenedor", 10, "progressTable", "cell1", "size");
bar1.Start();
id-div-contenedor: es el ID que contiene a la barra que armaremos.
10: es el número de celdas que va a tener nuestra barra. Cuantas más celdas tenga más larga va a ser.
progressTable: se refiere a la clase CSS para darle estilo exterior a la barra.
cell1: es el estilo de cada celda
size: el tamaño de cada celda
_______________________
El código Completo:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Barra de progreso animada con jQuery</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<style media="screen" type="text/css">
/*border de la barra de progreso*/
.progressTable
{
border: solid 1px #e1e1e1;
}
/*tamaño de la celda ancho-alto*/
.size, .cell1
{
width: 15px;
height: 15px;
}
/*color de la celda*/
.cell1
{
background-color: #22dd22;
display: none;
}
</style>
<script language="javascript">
<!--
$(document).ready(function()
{
var bar1 = new ProgressBar("contenedorBarra1", 15,
"progressTable", "cell1", "size");
bar1.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="contenedorBarra1"></div>
<br />
</body>
</html>
Espero que les salga!
