[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

Xamarin – Como consumir uma api local que roda no IIS Express no emulador

Share this on WhatsAppAprenda a consumir uma api local direto do emulador Hoje venho trazer uma dica bem interessante para vocês, irei explicar como podemos rodar 2 projetos ao mesmo

Conheça a classe Lazy do C# e ganhe mais performance e memória

Share this on WhatsAppComo utilizar a classe Lazy no C# Quem nunca teve problemas com performance em seu código que atire a primeira pedra! Resolvi escrever esse post com o

Como criar animações em páginas web e aplicativos híbridos

Share this on WhatsAppAprenda criar animações em páginas web e aplicativos híbridos como ionic e phonegap Fala galera beleza? Bom espero que sim, hoje um amigo meu me perguntou como

2 Comments

Leave a Reply