Indicadores de Carga en Ionic

Indicadores de Carga en Ionic: ion-loading, ion-progress-bar, ion-skeleton-text e ion-spinner

Los Indicadores de Carga en Ionic ofrecen varios componentes visuales para indicar progreso y carga de contenido, cada uno con un propósito específico:

• ion-loading: Ideal para mostrar un indicador de carga mientras la aplicación espera una respuesta o carga recursos.
• ion-progress-bar: Una barra de progreso visualmente representativa, continua o indeterminada.
• ion-skeleton-text: Simula la carga de contenido, mostrando un placeholder antes de que los datos reales aparezcan.
• ion-spinner: Ofrece diferentes estilos de spinners para representar estados de carga.

Estos componentes se pueden personalizar ampliamente para brindar una experiencia atractiva y moderna en aplicaciones móviles.

Requisitos previos y configuración del proyecto Ionic

Para empezar, asegúrate de tener Ionic instalado y configurado. Si no lo tienes, puedes instalarlo de la siguiente manera:

npm install -g @ionic/cli

Luego, crea un nuevo proyecto:

ionic start ProgressIndicatorsApp blank --type=angular
cd ProgressIndicatorsApp

Comenzando con ion-loading

El componente ion-loading es perfecto para situaciones en las que necesitas mostrar un diálogo de carga. Puedes personalizar el texto, el ícono y el tiempo de aparición.

Ejemplo básico de ion-loading

ionic g component loading-example

Crea un archivo loading-example.component.ts y agrega el siguiente código para un ejemplo básico:

import { Component } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Component({
  selector: 'app-loading-example',
  templateUrl: './loading-example.component.html',
})
export class LoadingExampleComponent {
  constructor(private loadingController: LoadingController) {}

  async presentLoading() {
    const loading = await this.loadingController.create({
      message: 'Cargando...',
      duration: 2000,
    });
    await loading.present();
  }
}

En el HTML (loading-example.component.html):

<ion-button (click)="presentLoading()">Mostrar Loading</ion-button>

Personalización avanzada de ion-loading

Puedes agregar una animación SVG personalizada y controlar el tiempo de aparición y cierre. En este caso, agregaremos un SVG animado.

async presentCustomLoading() {
  const loading = await this.loadingController.create({
    message: `<ion-icon name="rocket-outline"></ion-icon> Preparando tu experiencia...`,
    cssClass: 'custom-loading',
    duration: 3000,
  });
  await loading.present();
}

Agrega estilos en global.scss:

.custom-loading .loading-wrapper {
  background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8);
  color: white;
  font-size: 18px;
}

Creación de barras de progreso con ion-progress-bar

ion-progress-bar se puede utilizar para mostrar el progreso de una carga o proceso.

Ejemplo básico de ion-progress-bar

Agrega el siguiente código en un componente:

<ion-progress-bar value="0.5"></ion-progress-bar>

Esto crea una barra de progreso que está al 50% de su valor.

Uso de ion-progress-bar con carga dinámica

Crea un progreso que cambie automáticamente:

progress = 0.1;

incrementProgress() {
  this.progress = Math.min(1, this.progress + 0.1);
}

<ion-progress-bar [value]="progress"></ion-progress-bar>
<ion-button (click)="incrementProgress()">Incrementar Progreso</ion-button>

Aplicación de degradados y CSS avanzado

Puedes agregar un degradado para mejorar el aspecto visual:

ion-progress-bar {
  --background: linear-gradient(90deg, #007bff, #6610f2);
  --progress-background: linear-gradient(90deg, #6610f2, #007bff);
}

Uso de ion-skeleton-text para mejorar la carga de contenido

ion-skeleton-text ayuda a mostrar dónde aparecerá el contenido. Es útil en listas o grids.

Ejemplo básico de ion-skeleton-text

<ion-card>
  <ion-skeleton-text animated style="width: 60%; height: 20px;"></ion-skeleton-text>
  <ion-skeleton-text animated style="width: 100%; height: 20px;"></ion-skeleton-text>
</ion-card>

Spinners y carga visual con ion-spinner

Los spinners son útiles para mostrar una carga en progreso.

<ion-spinner name="crescent"></ion-spinner>
<ion-spinner name="bubbles"></ion-spinner>

Combinación de todos los componentes

Para una pantalla de carga completa, combínalos:

<ion-content>
  <ion-progress-bar type="indeterminate"></ion-progress-bar>
  <ion-skeleton-text animated style="width: 100%; height: 20px;"></ion-skeleton-text>
  <ion-spinner name="crescent"></ion-spinner>
</ion-content>

CSS avanzado y degradados personalizados

Aplica degradados para mejorar el diseño visual:

ion-progress-bar {
  --progress-background: linear-gradient(90deg, #ff6b6b, #f06595);
}

Esta guía cubre diferentes formas de utilizar los componentes de carga y los personaliza para que se adapten a cualquier aplicación. Con esto, puedes construir interfaces de usuario modernas y amigables en Ionic.

Conclusión

Esta guía proporciona un enfoque detallado sobre los indicadores de carga en Ionic, permitiendo personalizar y combinar componentes como ion-loading, ion-progress-bar, ion-skeleton-text e ion-spinner. Con estas herramientas, puedes diseñar interfaces modernas y amigables para mejorar la experiencia del usuario en tu aplicación móvil.

También puedes ver más Aquí