![[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 completo de Xamarim Forms em português
Share this on WhatsAppConheça tudo sobre o Xamarim Forms Já falei aqui no blog sobre a diferença entre aplicações nativas e híbridas, e que aplicações nativas tem um desempenho muito
Curso Ionic em português – Aula 9 – Tratando botão back da tela e do aparelho
Share this on WhatsAppVeja como remover o botão back da tela e tratar o back do hardware Pessoal, continuando com nossa série de vídeo aulas, hoje trago dicas de como
2 Comments
Luisandro
janeiro 28, 10:56Jack
julho 04, 14:49