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>


COMENTÁRIOS

Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: spin.js: Script para gerar imagens "Carregando"
spin.js: Script para gerar imagens "Carregando"
Aprenda a gerar imagens "Carregando" com o script Spin.js
http://4.bp.blogspot.com/-qcDQ4AikwDY/Tno-QWiUVaI/AAAAAAAASwk/tUggboXAD2E/s00/loading_big.gif
http://4.bp.blogspot.com/-qcDQ4AikwDY/Tno-QWiUVaI/AAAAAAAASwk/tUggboXAD2E/s72-c/loading_big.gif
Bloggermin
https://www.bloggermin.cashmore.com.br/2012/07/spinjs-script-para-gerar-imagens-carregando.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2012/07/spinjs-script-para-gerar-imagens-carregando.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO PESQUISAR TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar