Quantcast

Ionic Loading | Muestra el progreso de los que estés haciendo así

Aitor Sánchez - Blog - Oct. 31, 2023, 10:36 a.m.

¿Quieres mostrar un cuadro de dialogo a tus usuarios cúando, por ejemplo, hagas peticiones HTTP? O, quizás, ya sabes cómo se hace y lo que buscas es información sobre alguna función o campo de Loading Ionic ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo vas a aprender a mostrar un Loading Ionic en tu aplicación de manera sencilla e intuitiva para que le des feedback a tu usuario de lo que está haciendo tu app.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

 

Instalación y configuración de Ionic Loading

Al pertenecer al paquete core de sistema de Ionic no es necesario que realicemos instalación o configuración alguna. Simplemente tendremos que inyectarlo en los constructores y él se auto configura. Pero no te preocupes, ahora lo veremos todo más adelante.

 

Creación de un ion-loading

Para poder crear un ion-loading tenemos que hacer uso, como he explicado en el punto anterior, del módulo Loading Controller. Este nos proveerá de toda la estructura necesaria para poder utilizarlo. Veamos un ejemplo antes de continuar.

 

constructor(public loadingCtrl: LoadingController) {

}

presentLoadingDefault() {
  let loading = this.loadingCtrl.create({
    content: 'Please wait...'
  });

  loading.present();

  setTimeout(() => {
    loading.dismiss();
  }, 5000);
}

 

Como ves, construirlo es muy sencillo. Solo tenemos que llamar al método “créate” del módulo que hemos inyectado en el constructor y listo. Disponible para lo que necesitemos.

 

Dismissing / quitar el Load

Como sucede con los Alert y los Popover, tenemos la función “dismiss()” que será la encargada de disposear y eliminar el loading de la pantalla. Veamos un ejemplo:

 

loading.dismiss();

 

¿A qué es muy sencillo?

 

Cómo podemos usarlo

Antes de proceder, vamos a ver un ejemplo completo de cómo usar todo el tinglado este.

 

constructor(public loadingCtrl: LoadingController) {

}

presentLoadingDefault() {
  let loading = this.loadingCtrl.create({
    content: 'Please wait...'
  });

  loading.present();

  setTimeout(() => {
    loading.dismiss();
  }, 5000);
}

presentLoadingCustom() {
  let loading = this.loadingCtrl.create({
    spinner: 'hide',
    content: `
      <div class="custom-spinner-container">
        <div class="custom-spinner-box"></div>
      </div>`,
    duration: 5000
  });

  loading.onDidDismiss(() => {
    console.log('Dismissed loading');
  });

  loading.present();
}

presentLoadingText() {
  let loading = this.loadingCtrl.create({
    spinner: 'hide',
    content: 'Loading Please Wait...'
  });

  loading.present();

  setTimeout(() => {
    this.nav.push(Page2);
  }, 1000);

  setTimeout(() => {
    loading.dismiss();
  }, 5000);
}

 

Primero, vamos a realizar una importación de LoadingController. Será el módulo que nos permita, como he explicado antes, llevar a cabo todo este tutorial. (No está en el código, no veía necesario incluirlo)

Posteriormente, es necesario que hagamos una inyección del componente en el constructor de nuestra clase. Recordamos que no es necesaria ninguna configuración previa.

Continuemos, ahora nos vamos a posicionar en la función presente Loading. Esta función, tal cual está escrita, nos permitirá presentar un Loading en el que simplemente podrá “Please Wait..”

Para construir este loading nos vamos a valer del método “create()” que necesita una instancia de “loadingOptions”. Esta interfaz ahora la veremos más abajo. Por ahora quédate con el ejemplo.

La siguiente instrucción, será llamar al método “present()” que será el encargado de que nuestro loading se presente/muestre al usuario.

Dejando de un lado el “setTimeOut” que hemos definido en el ejemplo, que simularía, por ejemplo, una petición http a una api rest full alojada en alguna web, centrémonos en el método “dismiss()” Que será, como puedes imaginar, el método que esconderá el loading de la pantalla dejándose de mostrar al usuario.

Y esto es todo. Ya tenemos un ejemplo funcional. Ahora vamos a ver un poco más los ejemplos que hemos puesto en el ejemplo.

ion-load / loading personalizado / custom

Como era de esperar, Ionic pone a nuestra disposición la posibilidad de que hagamos el alert como nos de la gana, hablando mal. Por que nos permite pasarle un contenido html directamente que será, ni más ni menos, que lo que se muestre al lado del spinner.

A parte, nos permite definirle una duración “X”. Recuerda, Ionic trata todos los tiempos en milisegundos, a menos que se especifique explícitamente de otra manera.

Por otro lado, y como puedes ver en el ejemplo, “onDidDismiss()” es listener que nos permite conocer cuando el loading en cuestión ha dejado de estar activo y ya no está visible.

 

Como quitar el Spinner de un loading

En muchos casos, nuestras necesidades nos piden que quitemos el spinner de un loading. Pues bien, basta con que en el objecto loadingOptions que le pasamos al método créate le digamos en el campo “spinner” que se esconda con el valor “hide”.

 

Funciones y campos de ion-load

Ahora, en un intento de enseñarte algo más avanzado, vamos a hablar de los campos y funciones que tenemos disponibles en este componente. Los veremos con detenimiento para que lo entiendas perfectamente.

create(loadingOptions)

Este método será el que nos permite construir y definir todo nuestro loading.

  • loadingOptions -> LoadingOptions -> Una instancia de esta interface que veremos más abajo cuales son sus campos.
  • Retorno -> Loading -> Básicamente una instancia de Loading que es la que nos permitirá mostrar, ocultar, mofidicar, etc… nuestro loading.

 

LoadingOptions

Esta es la clase que venimos hablando desde hace un rato. Ahora vamos a ver los campos que tenemos disponibles para poder editar nuestro loading.

  • spinner -> string -> Será el nombre del SVG del spinner. Veamos las opciones.
    • Ios
    • Ios-small
    • Bubbles
    • Circles
    • Crescent
    • Dots
    • Hide
  • content -> string -> El contenido, en html, que queramos que tenga nuestros loading.
  • cssClass -> string ->. La clase/s css que queremos que tenga nuestro loading en caso de que queramos cambiar la apariencia de este.
  • showBackdrop -> boolean -> Si queremos que el loading tenga fondo. Por defecto es verdadero.
  • enableBackdropDismiss -> boolean -> Si queremos que se cierre o no al pulsar fuera de él. Por defecto false.
  • dismissOnPageChange -> boolean -> Si queremos que desaparezca al cambiar de ventana.
  • duration -> number -> La duración, en milisegundos, que queremos que permanezca abierto el modal.

 

Tutorial en video por si no te gusta leer

Como se que tengo algunos lectores, quizás seas tu, o no, os dejo una explicación en vídeo de como podemos hacerlo.

 

Algo más que quizás te interesa

Mira, mejorar el logo de tus aplicaciones móviles tiene un impacto directo en su visibilidad, en sus descargas y en los ingresos que tu app genera.

Por esta razón, hemos creado esta herramienta para que tu puedas evaluar, optimizar y mejorar el logo de tus apps y espiar a ver cómo lo está haciendo la competenciapara que te hagas una idea de por donde tirar. No te espoileo más, entra al enlace.

 

Bueno geniete, hasta aquí el artículo de hoy. Espero haberte ayudado y nos vemos en el siguiente. Hasta entonces ¡que vaya bien!

 

Otros artículos que te pueden interesar

Ionic Geofence | Aprende a usarlo cómo un profe...

¿Pensando en localizar a un usuario cuando haya pasado por X zona, o cerca de ella? O, qui...

Call Directory Ionic - ¡Qué es y cómo se usa!

¿Necesitas que tu usuario acceda a su directorio de llamadas y contactos desde tu aplicaci...

Firebase en Ionic - Qué es y cómo puedes utiliz...

¿Pensando en integrar Firebase dentro de tu app hecha en Ionic? O, quizás, ya lo ha...

Popover Ionic | Aprende cómo mostrar contenido ...

¿Quieres saber cómo mostrar esos mensajitos que aparecen al lado de nuestros compon...

Action Sheet Ionic - Ejemplos / Examples y más ...

Así que quieres incluir un menú de acciones flotante con el plugin Action Sheet Ion...

Ionic Toast | Comunícate con tu usuario con est...

¿Buscando una manera de comunicarte con tus usuarios y has optado por un Toast en Ionic? O...

SearchBar en Ionic - Qué es y cómo lo podemos usar

¿Pensando en incluir una barra de búsqueda, o search bar, en tu aplicación d...

Navigation Ionic y su Navcontroller

¿Buscando información sobre NavController, o navigation, del framework Ionic? O, qu...

File Transfer Ionic | Aquí tienes la guía más c...

¿Pensando en enviar, o recibir, archivos desde internet en tu app? O, quizás, ya sa...