Blog SW9

Desenvolvimento Web e Híbrido na prática.
Tome um café, concentre-se, codifique. (งツ)ว

loading.io | Construindo ícones animados com SVG / PNG / CSS / GIF | SW9


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

Tópicos Relacionados

Deixe um comentário

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Paulo Eduardo
Geek desde criança, sempre me interessei por games, filmes e tecnologia. Sou graduado em engenharia da computação pela PUC Campinas. Possuo mais de 15 anos de experiência em desenvolvimento, com foco maior em desenvolvimento web, gestão de times e mais recentemente desenvolvimento mobile utilizando HTML e Javascript.

Termos como #backend, #frontend e #fullstack fazem parte do meu dia a dia.

Não deixe de acompanhar meu blog, canal youtube e meus produtos digitais.

Divirta-se e bons estudos. :-)
Paulo Eduardo on sabyoutubePaulo Eduardo on sabinstagramPaulo Eduardo on sabgithubPaulo Eduardo on sabfacebook
✌(◕‿-)✌ Tempo Limitado - Tenha acesso a nossa área de DownloadsClique Aqui - É Grátis
How to whitelist website on AdBlocker?