[IONIC] – Custom Loader

[IONIC] – Custom Loader

Olá galera, tranquilo?

Primeiro, desejo a vocês um grande Ano Novo, muita saúde, sabedoria e sucesso na jornada de todos.

Bom, a dica de hoje é bem legal. Vamos criar um Loader customizado.

1. Criar o projeto Ionic

Vamos começar gerando um novo aplicativo Ionic em branco, para fazer isso, apenas execute o seguinte comando:

Uma vez criado, vamos entrar no diretório do Projeto, executando:

2. Criando o Provider

Para criar o nosso Provider com o serviço do Loader, devemos executar o comando:

O arquivo src/providers/loading/loading.ts foi criado, vamos alterá-lo:

Criamos 4 funções:

Essas iremos chamar para mostrar o loader com um gif qualquer, criamos 2 para demonstrar 2 gifs diferentes, lembrando que de acordo com sua aplicação, poderá definir qualquer a seu gosto.

Esta, vamos demonstrar um loader padrão, com uma simples mensagem.

E por fim, vamos finalizar o loader quando uma determinada ação do aplicativo terminar.

3. Utilizando o Loading

 

Vamos agora colocar em prática e executar os 3 tipos de Loading, alterando o arquivo: src/pages/home/home.ts:

Bem tranquilo, simplesmente criamos alguns Timeout para demonstrar os loaders com gif e com a mensagem, ao chamar o dismiss() irá começar o próximo loader, até terminar.

4. Executando o projeto

Pronto!!

Vamos ver o resultado, então digite o comando

ou

ou

e deveremos ter algo semelhante à isso:

Espero que tenham gostado e que possam utilizar daqui pra frente nos projetos de vocês essa dica bem bacana.

Caso tenham gostado, compartilhe com os amigos, e se houver dúvidas podem comentar, que o mais breve possível eu respondo!!

Claro que de acordo com a sua aplicação, basta adequar a chamada dos Loaders, por exemplo ao chamar uma nova tela, ou carregar dados de um banco de dados/servidor/api/ws…

O Código fonte para tudo isso que fizemos, encontra-se aqui.

Valeu, até mais!

Previous Curso grátis + sorteio! - Modelando Domínios Ricos (Atualizado!)
Next Criando uma Splash Screen animada no Ionic 2/3 com HTML e CSS3

About author

Junior Abranches
Junior Abranches 19 posts

Um apaixonado por tecnologia e desenvolvimento web e mobile. Compartilhar e aprender sempre!

You might also like

Mobile 4 Comments

Curso Ionic 5 é lançado, garanta cupons grátis!

Share this on WhatsAppFala Dev! Passando aqui rapidinho para informar que o curso de Ionic 5 do Zero até Publicação acaba de ser lançado! Este curso é para pessoas iniciantes

Mobile 0 Comments

Curso Ionic em português – Aula 8 – Adicionando tela de aguarde!

Share this on WhatsAppExiba tela de aguarde quando estiver processando algo Pessoal, continuando com nossa série de vídeo aulas, hoje trago dicas de como podemos abrir uma tela de aguarde

Mobile 0 Comments

Participe – Maratona Xamarin gratuita e com certificado da Microsoft

Share this on WhatsAppMicrosoft Brasil cria maratona Xamarin e da certificado No dia 30 de janeiro de 2017 a Microsoft Brasil irá realizar uma Maratona Xamarin com direito a certificado.

2 Comments

Leave a Reply