![[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
Depurando sites com Chrome Developer Tools
Share this on WhatsAppFala Dev!Depois de realizar muitas consultorias ajudando outros Devs no mercado de trabalho, percebi uma dificuldade em comum. O problema Se você se enquadrar na listagem abaixo,
Curso Grátis – Iniciando com Ionic
Share this on WhatsAppFala galera, tudo bem por aí? Temos uma boa novidade.. Agora, além de artigos e tutoriais publicados por aqui, criei um canal no Youtube sobre o desenvolvimento
Flutter – Conhecendo o SDK mobile do Google
Share this on WhatsAppOlá pessoal, beleza? Há cerca de 3 anos venho me dedicando fortemente ao desenvolvimento mobile com o Ionic Framework. Porém, há 5 ou 6 meses uma nova
2 Comments
Luisandro
janeiro 28, 10:56Jack
julho 04, 14:49