Barra de progreso animada con jQuery

Esta barra de progreso (progress bar) aunque no lo parezca, no contienen imágenes, es puro JavaScript. Para crear esto se usa la clase JavaScript Timer y función fade (descoloración) de jQuery así se consigue el efecto deseado. Para agregar la barra de progreso a nuestra página web, solo debemos agregar la clase ProgressBar como se muestra en el siguiente código:

var bar1 = new ProgressBar("id-div-contenedor", 10, 
  "progressTable", "cell1", "size");
bar1.Start();

Donde el primer parámetro es el ID del div que contendrá la barra de progreso. El segundo parámetro es el número de celdas que desea incluir en barra de progreso. El tercero es la clase CSS para el estilo exterior de la barra. El cuarto es la clase CSS para el estilo de cada celda y el quinto es la clase CSS para el tamaño de cada celda.

Puedes ver el demo aquí mismo. Veamos el código-ejemplo.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Barra de progreso animada con jQuery</title>

    <script src="jquery.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 las celdas ancho-alto*/
        .size, .cell1, .cell2, .cell3
        {
            width: 15px;
            height: 15px;    
        }
	/*colores de las celdas*/
        .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("contenedorBarra1", 10, 
          "progressTable", "cell1", "size");
        bar1.Start();
        
        var bar2 = new ProgressBar("contenedorBarra2", 16, 
          "progressTable", "cell2", "size");
        bar2.Start();
        
        var bar3 = new ProgressBar("contenedorBarra3", 8, 
          "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="contenedorBarra1">
    </div>
    <br />
    <div id="contenedorBarra2">
    </div>
    <br />
    <div id="contenedorBarra3">
    </div>
</body>
</html>

Vía Daily Coding

Leave a Reply Cancel reply