Foros del Web » Programando para Internet » Javascript »

Indicador de Progreso Circular

Estas en el tema de Indicador de Progreso Circular en el foro de Javascript en Foros del Web. 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......
  #1 (permalink)  
Antiguo 21/06/2010, 20:54
Avatar de ClubIce  
Fecha de Ingreso: diciembre-2008
Mensajes: 216
Antigüedad: 13 años, 4 meses
Puntos: 2
Pregunta Indicador de Progreso Circular

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

  #2 (permalink)  
Antiguo 22/06/2010, 04:23
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 15 años, 4 meses
Puntos: 126
Respuesta: Indicador de Progreso Circular

Hola

Creo que te refieres a una imagen .gif

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #3 (permalink)  
Antiguo 22/06/2010, 14:12
Avatar de ClubIce  
Fecha de Ingreso: diciembre-2008
Mensajes: 216
Antigüedad: 13 años, 4 meses
Puntos: 2
Respuesta: Indicador de Progreso Circular

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.....
  #4 (permalink)  
Antiguo 22/06/2010, 16:03
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 20 años, 1 mes
Puntos: 1284
Respuesta: Indicador de Progreso Circular

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 23/06/2010, 00:16
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.142
Antigüedad: 18 años
Puntos: 832
Respuesta: Indicador de Progreso Circular

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:0padding: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%;  }
.rwidth:50pxheight:2pxbackground:#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:0padding: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%;  }
.rwidth:33pxheight:2pxbackground:#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 ;)

Última edición por Panino5001; 23/06/2010 a las 07:16 Razón: Contemplar el standar de rotación de w3c, de futura implementación

Etiquetas: barra, circular, progreso, progressbar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 16:54.