Guía detallada y extensiva de cada componente (ion-loading, ion-progress-bar, ion-skeleton-text, ion-spinner) con ejemplos y personalización avanzada en cada uno. Esta guía busca aprovechar al máximo cada componente, incluyendo ejemplos de animaciones SVG, CSS personalizado, y variaciones de uso para que cubra múltiples escenarios de aplicación.
Índice
- Introducción a los Progress Indicators en Ionic
- Requisitos previos y configuración del proyecto Ionic
- Comenzando con
ion-loading
- Ejemplo básico de
ion-loading - Personalización avanzada de
ion-loading - Uso de
ion-loadingen combinación con otros elementos de UI
- Creación de barras de progreso con
ion-progress-bar
- Ejemplo básico de
ion-progress-bar - Uso de
ion-progress-barcon carga dinámica - Aplicación de degradados y CSS avanzado
ion-progress-barcomo indicador de progreso en múltiples pasos
- Uso de
ion-skeleton-textpara mejorar la carga de contenido
- Ejemplo básico de
ion-skeleton-text - Diseño de placeholders personalizados para listas y grids
- Implementación de animaciones SVG con
ion-skeleton-text
- Spinners y carga visual con
ion-spinner
- Ejemplo básico de
ion-spinner - Personalización de
ion-spinnercon SVG animados - Uso de múltiples spinners en una sola vista
- Creación de una interfaz de carga moderna combinando todos los componentes
- Diseño de una pantalla de carga avanzada
- Sincronización entre
ion-loading,ion-progress-baryion-spinner
- CSS avanzado y degradados personalizados
- Aplicación de degradados en
ion-progress-bar - Degradados personalizados en
ion-spinneryion-loading
- Buenas prácticas y consideraciones finales para mejorar la experiencia de usuario
1. Introducción a los Progress Indicators en Ionic
Ionic ofrece varios componentes visuales para indicar progreso y cargar contenido, cada uno con un propósito específico:
ion-loading: Ideal para mostrar un indicador de carga cuando la app está esperando una respuesta o cargando recursos.ion-progress-bar: Una barra de progreso visualmente representativa que puede ser continua o indeterminada.ion-skeleton-text: Útil para dar la apariencia de carga de contenido, simulando el espacio donde el contenido aparecerá.ion-spinner: Proporciona múltiples estilos de spinners para representar estados de carga.
Estos componentes se pueden personalizar para ofrecer una experiencia única y visualmente atractiva en aplicaciones móviles.
2. 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 ProgressIndicatorsApp3. 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-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>Si deseas llamar este componente a tu pagina home puedes hacerlo siguiendo este tutorial: Cómo Importar y Usar Componentes en la Página Principal (Home) de una Aplicación Ionic
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;
}4. 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);
}5. 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>6. 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>7. 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>
8. 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.
