Indicador de Progreso Circular

ClubIce · #1 (**permalink**) 21/06/2010, 20:54

Holam,

Aqui traigo una dudita, ¿Cómo hacer un Indicador de Progreso Circular (Redondo)? o depronto por aquí alguin conoce algun ejemplo que peda usar...

Adler · #2 (**permalink**) 22/06/2010, 04:23

Hola

Creo que te refieres a una imagen .gif

Suerte

ClubIce · #3 (**permalink**) 22/06/2010, 14:12

No hablo de una imagen, sino de un algo que me indique cuanto a progresado algo, como decir, cuantos elementas de la pagina, han cargado o el tiempo restante para ejecutar una operacion...

Pero en mi caso, lo que quiero es que el indicardor, cargue en modo de circulo. No como la tradicional barrita que algunos sitios usan.....

caricatos · #4 (**permalink**) 22/06/2010, 16:03

Hola:

Si sabes el porcentaje del progreso, con barras es muy fácil... podríamos decir "trivial", pero la formacircular solo puede tratarse de una imagen, y por consiguiente, sería necesario una imagen por cada sector que quieras representar... o crearlo con un lenguaje del servidor (php + GD, por ejemplo). En mi opinión se trataría de un sistema muy poco eficiente, ya que crear dinámicamente las imágenes sería más lento que la mayoría de casos que necesitamos esa implementación... y si son fijas, habría que precargarlas (otro gasto que quita efectividad al problema)

Saludos

Panino5001 · #5 (**permalink**) 23/06/2010, 00:16

Con un poco de css:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style>
*{margin:0; padding:0}
#e{ width:100px; height:100px; overflow:hidden; position:absolute; top:50%; left:50%; z-index:360; margin-left:-50px; margin-top:-50px; border:1px dashed #999}
#c{ width:100px; height:2px; overflow:hidden; position:absolute; top:50%;  }
.r{ width:50px; height:2px; background:#F00}
</style>
<script>
function rotate(angle){
    var rotation = Math.PI * angle / 180;
    var costheta = Math.cos(rotation);
    var sintheta = Math.sin(rotation); 
    if(!window.ActiveXObject){
        this.style.position='absolute';
        this.style.webkitTransform ='rotate('+angle+'deg)';    
        this.style.MozTransform='rotate('+angle+'deg)';    
        this.style.OTransform='rotate('+angle+'deg)';
        this.style.transform='rotate('+angle+'deg)';
    }else{
        this.style.filter="progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
        this.filters.item(0).M11 = costheta;
        this.filters.item(0).M12 = -sintheta;
        this.filters.item(0).M21 = sintheta;
        this.filters.item(0).M22 = costheta; 
        this.style.top=50-this.offsetHeight/2+'px';
        this.style.left=50-this.offsetWidth/2+'px';
    }
}
onload=function(){
    var progress=0;
    var i=setInterval(function(){
        progress++;
        var o=    document.getElementById('c').cloneNode(1);
        o.style.zIndex=360-progress;
        document.getElementById('e').appendChild(o);
        rotate.call(o,progress);
        if(progress==360){
            clearInterval(i);
            alert('listo');
        }
    },100);
    
}
</script>
</head>

<body>
<div id="e"><div id="c"><div class="r"></div></div></div>
</body>
</html>

O así (lo mismo, pero en forma de anillo):

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style>
*{margin:0; padding:0}
#e{ width:100px; height:100px; overflow:hidden; position:absolute; top:50%; left:50%; z-index:360; margin-left:-50px; margin-top:-50px; border:1px dashed #999}
#c{ width:100px; height:2px; overflow:hidden; position:absolute; top:50%;  }
.r{ width:33px; height:2px; background:#F00}
</style>
<script>
function rotate(angle){
    var rotation = Math.PI * angle / 180;
    var costheta = Math.cos(rotation);
    var sintheta = Math.sin(rotation); 
    if(!window.ActiveXObject){
        this.style.position='absolute';
        this.style.webkitTransform ='rotate('+angle+'deg)';    
        this.style.MozTransform='rotate('+angle+'deg)';    
        this.style.OTransform='rotate('+angle+'deg)';
        this.style.transform='rotate('+angle+'deg)';
    }else{
        this.style.filter="progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
        this.filters.item(0).M11 = costheta;
        this.filters.item(0).M12 = -sintheta;
        this.filters.item(0).M21 = sintheta;
        this.filters.item(0).M22 = costheta; 
        this.style.top=50-this.offsetHeight/2+'px';
        this.style.left=50-this.offsetWidth/2+'px';
    }
}
onload=function(){
    var progress=0;
    var i=setInterval(function(){
        progress++;
        var o=    document.getElementById('c').cloneNode(1);
        o.style.zIndex=360-progress;
        document.getElementById('e').appendChild(o);
        rotate.call(o,progress);
        if(progress==360){
            clearInterval(i);
            alert('listo');
        }
    },100);
    
}
</script>
</head>

<body>
<div id="e"><div id="c"><div class="r"></div></div></div>
</body>
</html>

Claro que con canvas sería más sencillo, pero esta es una manera ;)