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/cliLuego, crea un nuevo proyecto:
ionic start ProgressIndicatorsApp blank --type=angular
cd ProgressIndicatorsAppComenzando 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-exampleCrea 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í
