spin.js: Script para gerar imagens "Carregando"

Aprenda a gerar imagens "Carregando" com o script Spin.js

Spin.js é um pequeno script que permite criar aquelas imagens que você vê frequentemente quando indica que algo está carregando e devemos esperar.

Siga o @bloggermin agora e fique por dentro das novidades para o seu blog. E curta nossa página no Facebook.


Não parece nada de outro mundo, mas há uma diferença substancial; não gera imagens mas animações com CSS ou usando a linguagem VML no caso que estivermos usando Internet Explorer incluindo a versão 6 se é que ainda haja dinossauros caminhando pela web.

Esta é uma imagem

Integra-se facilmente, basta adicionar o script normal ou minimizado baixado do site do autor e adicioná-lo antes de head ou hospedá-lo em seu próprio servidor:

<script type='text/javascript' src='URL_spin.min.js'></script>

ou copie e cole seu conteúdo:

<script type='text/javascript'>
//<![CDATA[
....... aqui cole o conteúdo do arquivo.......
//]]>
</script>

Agora, podemos usá-lo de duas maneiras, ou adicionamos definições globais para controlar a sua aparência:

<script>
var opts = {
lines: 15, // a quantidade de linhas
length: 36, // o tamanho de cada linha
width: 8, // a espessura das linhas
radius: 36, // o raio do circulo
color: '#333', // a cor em formato RGB
speed: 1, // a velocidade
trail: 60, // o efeito de brilho
shadow: false // habilitar ou desabilitar as sombras
};
</script>

E podemos gerar a imagem em uma DIV:

<div id="spin1"></div>
<script>new Spinner(opts).spin(document.getElementById('spin1'));</script>

Isto não é uma imagem

Ou podemos gerar imagens individuais, estabelecendo diferentes opções:

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