ionic
  1. ionic-loading
PreviousNext

Ionic Loading

Ionic Loading provides a customizable spinner or loader that can be used to indicate progress during activities like content loading or form submission. The component allows for customization of spinner type, color, duration, and backdrop.

Syntax

<ion-loading
   [showBackdrop]="true"
   [dismissOnPageChange]="false"
   [spinner]="'lines'"
   [duratioin]="5000"
   [message]="'Please wait...'">
 </ion-loading>

Example

<!-- Example usage of ionic loading -->
<ion-button expand="block" (click)="showLoader()">
  Show Loader
</ion-button>

<!-- Ionic loader -->
<ion-loading-controller></ion-loading-controller>

import { IonLoadingController } from '@ionic/angular';

constructor(private loadingController: IonLoadingController) { }

async showLoader() {
  const loading = await this.loadingController.create({
    spinner: 'bubbles',
    message: 'Please wait...',
    duration: 2000
  });
  await loading.present();
}

Output

The output of this code will be an animated spinner and customizable message displayed to the user. The duration can also be set for the duration of the spinner.

Explanation

The code example above uses Ionic's LoadingController to create a loading spinner with a message that can be displayed for a set duration. The spinner attribute can be set to several predefined types such as lines, dots or even set to a custom SVG image. The message attribute can be set to a message to display while the spinner is active. The duration attribute can be set to the length of time to show the message for before the spinner is automatically dismissed.

Use

Ionic Loading can be used in scenarios that require a spinner or loader, such as:

  • Indicating progress during content or data loading
  • Showing feedback during form submissions
  • Displaying a temporary screen or transition while preparing data or content

Important Points

  • Ionic Loading provides a customizable spinner with many options, including type, color, duration, and backdrop.
  • The LoadingController creates and presents the loading spinner, allowing for detailed customization and control.
  • The loading spinner can be used in various scenarios where visual feedback is required during a process.

Summary

Ionic Loading component is a convenient and customizable spinner or loader that can be used to indicate progress during activities like content loading or form submission. With several configurable options available, the loading spinner can be tailored to suit various scenarios and user interface requirements.

ListMenus
Published on: