[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 2 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 4 Comments

Curso completo de Xamarim Forms em português

Share this on WhatsAppConheça tudo sobre o Xamarim Forms Já falei aqui no blog sobre a diferença entre aplicações nativas e híbridas, e que aplicações nativas tem um desempenho muito

Mobile 0 Comments

Curso Ionic em português – Aula 9 – Tratando botão back da tela e do aparelho

Share this on WhatsAppVeja como remover o botão back da tela e tratar o back do hardware Pessoal, continuando com nossa série de vídeo aulas, hoje trago dicas de como

2 Comments

Leave a Reply