![[IONIC] – Custom Loader](https://ilovecode.com.br/wp-content/uploads/2018/01/Sem-título.png)
[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:
|
1 |
ionic start customLoader blank |
Uma vez criado, vamos entrar no diretório do Projeto, executando:
|
1 |
cd customLoader |
2. Criando o Provider
Para criar o nosso Provider com o serviço do Loader, devemos executar o comando:
|
1 |
ionic g provider loading |
O arquivo src/providers/loading/loading.ts foi criado, vamos alterá-lo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
import { Injectable } from '@angular/core'; import { Loading, LoadingController } from 'ionic-angular'; @Injectable() export class LoadingProvider { loading: Loading; constructor(public loadingCtrl: LoadingController) { } presentWithGif1() { this.loading = this.loadingCtrl.create({ spinner: 'hide', content: ` <div class="custom-spinner-container"> <img class="loading" width="120px" height="120px" src="assets/loader1.gif" /> </div>` }); return this.loading.present(); } presentWithGif2() { this.loading = this.loadingCtrl.create({ spinner: 'hide', content: ` <div class="custom-spinner-container"> <img class="loading" width="70px" height="70px" src="assets/loader2.gif" /> </div>` }); return this.loading.present(); } presentWithMessage(message) { this.loading = this.loadingCtrl.create({ content: message }); return this.loading.present(); } dismiss() { return new Promise((resolve, reject) => { if (this.loading) { return this.loading.dismiss(resolve(true)).catch(error => { console.log('loading error: ', error); }); } else { resolve(true); } }); } } |
Criamos 4 funções:
-
1presentWithGif1()
-
1presentWithGif2()
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.
-
1presentWithMessage(message)
Esta, vamos demonstrar um loader padrão, com uma simples mensagem.
-
1dismiss()
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { LoadingProvider } from '../../providers/loading/loading'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController, public loadingCtrl: LoadingProvider) { this.loadingCtrl.presentWithGif1(); setTimeout(() => { this.loadingCtrl.dismiss().then(() => { this.loadingCtrl.presentWithGif2(); setTimeout(() => { this.loadingCtrl.dismiss().then(() => { this.loadingCtrl.presentWithMessage('Carregando'); setTimeout(() => { this.loadingCtrl.dismiss().then(() => {}); }, 5000); }); }, 5000); }); }, 5000); } } |
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
|
1 |
ionic serve -l |
ou
|
1 |
ionic cordova run android |
ou
|
1 |
ionic cordova run ios |
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!
About author
You might also like
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
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
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
Luisandro
janeiro 28, 10:56Jack
julho 04, 14:49