loading.io | Usando o serviço loading.io para construir ícones animados com SVG / PNG / CSS / GIF (Ajax loading icon)
Olá a todos. Sejam bem vindos aos Canal e Blog SW9
Introdução
No vídeo de hoje eu vou dar a dica de um serviço e mostrar passo a passo como utilizá-lo.
Mas antes de começar, minha idéia é criar uma seção no blog e canal youtube para dar dicas sobre diversos serviços disponíveis na web e que podem facilitar o nosso dia a dia.
Para inaugurar esta seção, vou apresentar o serviço chamado [loading.io] cujo objetivo é permitir a construção de ícones animados a partir de SVG, PNG, CSS. Mas o serviço vai além disso, ele nos permite usar as animações e recursos em conjunto com o BootStrap UI e também a biblioteca de ícones FontAwesome.
Outro recurso bem útil é permitir criar Gifs animados a partir de upload de um SVG, PNG ou utilizando a própria biblioteca de ícones do loading.io.
O recurso de gif animado é muito importante para manter a compatibilidade com todos os browsers, uma vez que animações em CSS 3 não são compatívies com bowsers mais antigos e com o navegador Internet Exporer inferior a versão 11.0.
Importância
Mas porque apresentar um recurso de geração de ícones animados? A resposta é simples. Hoje em dia acredito que a maioria dos sites e web apps usam este tipo de recurso para apresentar um indicador visual de algum processamento que está sendo feito no site. Exemplo: Se um app faz uma requisição a uma determinada API, geralmente utiliza-se um ícone animado (Ajax Loading Icon) para mostrar ao usuário que algum processamento está sendo feito.
Também recomendo usar (Ajax Loading Icons) em situações como: carregamento de dados em grid, geração de relatório, chamado API rest, chamada Ajax, etc. Em resumo, são inúmeras as possibilidades
dentro de seu site ou app Web para usar ícones animados.
Assuntos abordados
Em resumo, abordarei neste vídeo:
1- Setup da biblioteca loading.io
2- Usando loading.io em conjunto com BootStrap e FontAwesome
3- Usando recursos de velocidade, pausa, direção e composição de animação
4- Mostrando como usar SVG e PNG em conjunto com loading.io
5- Criando gifs animados a partir de SVG e PNG
6- Usando a própria biblioteca de ícones do loading.io
7- Criando CSS a partir de alguns ícones disponíveis no site.
Como de costume, deixarei um link no final da descrição para baixarem o código fonte exemplo. O processo é bem simples, basta acessar o link, informar um e-mail válido e dentro de instantes receberá o link para acesso irrestrito em minha área de downloads.
O que estão esperando? Baixem agora mesmo o código fonte e bons estudos.
Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.
Fiquem com Deus e até o próximo vídeo.
Links úteis:
Código Fonte: http://blog.sw9.com.br/acesso-area-de-downloads/
Site loading.io: loading.io
Meu Blog: http://blog.sw9.com.br
Meu GitHub: https://sw9brl.github.io/MyGitHubPage
Canal youtube: youtube.com/+sw9brl
Link do vídeo: https://youtu.be/xo38YQPMaOc
✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se
Que tal me pagar um café :-)
Uma pequena quantidade de café foi consumida durante a produção de um post + vídeo. Se puder, contribua adicionando mais combustível para que eu tenha condições de seguir em frente.
Brincadeiras à parte, o valor selecionado é multiplicado por 2 (x2) que representa a multiplicação de minha dedicação a cada contribuição que recebo.
Deixe um comentário