![[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
Conheça alguns atalhos do Visual Studio que irão agilizar seu dia!
Share this on WhatsAppConheça agora atalhos interessantes para usar no Visual Studio Sabemos que o mouse facilita muito o nosso dia a dia, com ele clicamos em menus, arrastamos documentos,
Como fazer meu aplicativo Ionic falar?
Share this on WhatsAppHoje criei um post bem interessante onde ensino a fazer seu celular falar com o usuário, isso mesmo, seu celular vai falar palavras ou frases que você
Universal Apps – Compartilhando código entre o Windows e Windows Phone
Share this on WhatsAppAprenda compartilhar o código de sua aplicação na Universal Apps Ao iniciarmos o desenvolvimento de um novo aplicativo usando a estrutura do Universal Apps, percebemos que em
2 Comments
Luisandro
janeiro 28, 10:56Jack
julho 04, 14:49