[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 0 Comments

Conheça alguns atalhos do Visual Studio que irão agilizar seu dia!

Share this on WhatsAppConheça agora atalhos interessantes para usar no Visual Studio Sabemos que o mouse facilita muito o nosso dia a dia, com ele clicamos em menus, arrastamos documentos,

Mobile 0 Comments

Como fazer meu aplicativo Ionic falar?

Share this on WhatsAppHoje criei um post bem interessante onde ensino a fazer seu celular falar com o usuário, isso mesmo, seu celular vai falar palavras ou frases que você

Mobile 1Comments

Universal Apps – Compartilhando código entre o Windows e Windows Phone

Share this on WhatsAppAprenda compartilhar o código de sua aplicação na Universal Apps Ao iniciarmos o desenvolvimento de um novo aplicativo usando a estrutura do Universal Apps, percebemos que em

2 Comments

Leave a Reply