[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!)

About author

Junior Abranches
Junior Abranches 17 posts

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

You might also like

Mobile 0 Comments

[IONIC 3] – Criando elegante Slide-Show

Share this on WhatsAppFala pessoal, tudo bem com vocês? Na verdade essa dica de hoje fui um pedido de uma galera que viu em um Aplicativo meu e pediu para

Mobile 4 Comments

Validando dados com a classe ArgumentValidator no C#

Share this on WhatsAppConheça a classe ArgumentsValidator E ai pessoal beleza? Hoje gostaria de compartilhar com vocês uma classe que eu criei que nos auxilia na validação de dados. Há

Mobile 8 Comments

Curso grátis de Ionic em português

Share this on WhatsAppConfira uma série de vídeo aulas sobre Ionic Pessoal hoje venho trazer uma ótima notícia pra vocês, recebi um desafio de fazer um aplicativo em Ionic e

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Reply