Indicadores de Carga en Ionic

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í

Contenido:
Nuevos artículos
PHP Go
PHP: Go guía para dominar programación concurrente

Descubre cómo la unión entre PHP y Go está transformando el desarrollo web. Una combinación que ya adoptaron plataformas como paginaweb.app para alcanzar velocidad, eficiencia y escalabilidad sin comprometer la experiencia del usuario. ¿Te imaginas lo que puede lograr tu proyecto con esta dupla?

Leer más
PHP desarrollo web
PHP desarrollo web con PaginaWeb.app

PHP desarrollo web es más que un lenguaje: es la herramienta que impulsa millones de sitios en todo el mundo. En PaginaWeb.app, no solo lo implementamos, lo optimizamos para que tu página funcione con velocidad, seguridad y escalabilidad. Pero ¿por qué sigue siendo tan relevante

Leer más
Ruby Sintaxis
Ruby Sintaxis: tu nueva aliada para el desarrollo web ágil

La sintaxis de Ruby es más que elegante: es poderosa, flexible y perfecta para desarrollar con rapidez. Pero, ¿Qué la hace tan especial? ¿Y cómo puedes aprovecharla desde hoy mismo con Rails y herramientas como paginaweb.app? Si alguna vez pensaste que programar debía ser más

Leer más
JavaScript fundamentos
JavaScript fundamentos para desarrollo web moderno

¿Estás comenzando en programación y escuchas hablar de JavaScript por todos lados? Este lenguaje no solo es clave para crear sitios web interactivos, sino que también es la puerta de entrada al mundo del desarrollo moderno. En esta guía clara y sin vueltas, te llevamos

Leer más
Scroll al inicio