JMiur [E]

spin.js es un pequeño script que permite crear esas imágenes que uno ve a menudo cuando de indica que algo se está cargando y debemos esperar.

esta es una imagen


No parecería nada del otro mundo pero hay una diferencia sustancial; no genera imagenes sino animaciones con CSS o usando el lenguaje VML en el caso que estemos usando Internet Explorer incluyendo la versión 6 si es que aún hay dinosaurios caminando por la web.

Se integra fácilmente, basta agregar el script normal o minimizado que descargamos desde la página del autor y agregarlo antes de </head> ya sea, alojándolo en un servidor propio:
<script type='text/javascript' src='URL_spin.min.js'></script>
o copiando y pegando su contenido:
<script type='text/javascript'>
//<![CDATA[
  ....... acá copiamos y pegamos el contenido del archivo .......
//]]>
</script>
Ahora, podemos usarlo de dos modos, o agregamos definiciones globales para controlar su aspecto:
<script>
  var opts = {
    lines: 15, // la cantidad de líneas
    length: 36, // el tamaño de cada línea
    width: 8, // el grosor de las líneas
    radius: 36, // el radio del círculo
    color: '#FFF', // el color en formato RGB
    speed: 1, // la velocidad
    trail: 60, // el efecto luminosidad
    shadow: false // habilitar o deshabilitar las sombras
  };
</script>
Y generamos la imagen en un DIV:
<div id="spin1"></div>
<script>new Spinner(opts).spin(document.getElementById('spin1'));</script>

esto no es una imagen





O bien podemos generar imágenes individuales, estableciendo opciones diferentes:
<div id="spin2"></div>
<script>new Spinner({color:'#FF0', lines: 12}).spin(document.getElementById('spin2'));</script>



<div id="spin3"></div>
<script>
  new Spinner({color:'#77DF', lines: 15, length: 20, width: 6, radius: 20, speed: 2}).spin(document.getElementById('spin3'));
</script>

8 comentarios:

BlackSmith Techs  

Tu blog va directo a mis favoritos
garantías para alquilar en rosario
Lenceria Rosario

Responder
Bocha  

JMiur, te hago una consulta. En mi blog coloque en el pie del mismo, una frase acompañada por una imagen, esa imagen quiero que tenga los bordes redondos de tal forma que quede dentro de marco redondo que le hice, pero por algún motivo no me reconoce el código en la imagen. ¿Cual puede ser el problema?

Gracias anticipadas.
http://elpendrivedebocha.blogspot.com.ar/

JMiur  

Seguramente, la ves mal en Chrome porque en ese navegador, los bordes redondeados funcionan distinto y debes agregarle el border-radius a la imagen.

En realidad, lo puedes simplificar todo eliminando es etiqueta personal <avatarcircular> que no tiene uso práctico alguno:

<div style="position:relative;float: left;overflow: hidden;width: 100px ;
height: 100px;margin:0;padding:0;border: 4px solid #81BEF7;border-radius: 100px;">
<img src="xxxxxxxx" style="width:100px;height:100px;border-radius:100px">
</div>

Bocha  

Gracias JMiur!! quedo perfecto. Hice al pie de la letra lo que me dijiste y salio bien. Ya que estoy te consulto, tengo un problema en los comentarios anidados, no me es visible la foto de perfil de ningún comentario, ni los míos, ni el de los usuarios y menos los anónimos. No se que puede ser. Se te ocurre algo? En esta entrada podes ver el problema del que me refiero. http://elpendrivedebocha.blogspot.com.ar/2011/12/chau-2011-un-ano-que-tuvo-de-todo.html

JMiur  

Ahí no sé qué podría hacerse ya que eso es un script que maneja Blogger por completo; sólo se me ocurre verificar que el includable donde está esa parte, esté completa o eliminarla y volverla a colocar.

Responder
Mike Arana  

como lo implemento en la precarga de una pagina?

JMiur  

Dependerá de la página. Cono fondo del BODY, como un DIV que luego se oculta, etc etc.

Responder
Mike Arana  

GRACIAS YA SUPE http://aranasoluciones.com/spintest-2/spin-2.html

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR