Skip to main content
Mapagam

Working with Loading Indicators

1. Creating Loading Spinner

Property Description Default Example
message Text to display in the loading indicator 'Loading...' message: 'Please wait...'
duration Time in milliseconds to show the loading indicator before auto-hiding 0 duration: 3000
spinner Spinner type to use (e.g., 'bubbles', 'circles', 'crescent') 'crescent' spinner: 'bubbles'
showBackdrop Whether to show a backdrop behind the loading indicator true showBackdrop: false

Example: Creating a basic loading spinner

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

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

Example: Loading spinner with custom spinner type

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

async function presentCustomSpinner() {
  const loading = await loadingController.create({
    message: 'Loading data...',
    spinner: 'bubbles',
    showBackdrop: false
  });
  await loading.present();
}

2. Configuring Loading Message

Property Description Default Notes
message Text to display in the loading indicator null Can include HTML tags for formatting
duration Time in milliseconds before loading indicator is dismissed 0 Set to 0 for indefinite loading
spinner Spinner type to display lines Options: lines, dots, crescent, bubbles
cssClass Custom CSS class to apply to the loading indicator null Allows for custom styling

Example: Basic Loading Message

<ion-loading>
  <ion-content>
    <div class="loading-message">Loading data...</div>
  </ion-content>
</ion-loading>

Example: Loading with Custom Spinner

<ion-loading
  message="Processing..."
  spinner="crescent"
  duration="3000">
</ion-loading>

3. Setting Loading Duration

Property Values Description
duration number Duration in milliseconds for which the loading indicator will be displayed. If not set, the loader will stay visible until explicitly dismissed.
minDuration number Minimum duration in milliseconds the loader will be displayed, regardless of when it is dismissed. Useful to prevent flickering for very fast operations.

Example: Setting Duration

import { LoadingController } from &#x27;@ionic/angular&#x27;;

async presentLoader() {
  const loading = await this.loadingController.create({
    message: &#x27;Loading data...&#x27;,
    duration: 3000 // Will show for 3 seconds
  });
  await loading.present();
}

Example: Using minDuration

async presentLoaderWithMinDuration() {
  const loading = await this.loadingController.create({
    message: &#x27;Processing...&#x27;,
    minDuration: 1000 // Will show for at least 1 second
  });
  await loading.present();
}

4. Dismissing Loading

Method Description Parameters Notes
dismiss() Closes the loading indicator data?: any Optional data to pass back to the caller
onDidDismiss() Promise that resolves when the loading indicator is dismissed callback?: (data: any) => void Allows for handling logic after dismissal

Example: Dismissing Loading with Data

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

async function showLoading() {
  const loading = await loadingController.create({
    message: 'Loading...'
  });
  await loading.present();

  // Dismiss with data
  setTimeout(() => {
    loading.dismiss({ result: 'success' });
  }, 2000);
}

// Handle dismissed data
loading.onDidDismiss().then((data) => {
  console.log('Dismissed with data:', data);
});

5. Using IonSpinner Component

Property Values Description
name ios, md, dots, crescent, lines, lines-sharp, lines-round Predefined spinner types. Default is ios.
color primary, secondary, tertiary, success, warning, danger, light, medium, dark Color of the spinner. Default is primary.
duration number Duration in milliseconds for the spinner animation. Default is 1000.

Example: Basic Usage of IonSpinner

<ion-spinner name="dots"></ion-spinner>

Example: Customizing Spinner Color

<ion-spinner name="crescent" color="secondary"></ion-spinner>

Example: Using Spinner in a Loading Overlay

import { IonSpinner } from "@ionic/react";

const LoadingSpinner = () => {
  return (
    <div className="loading-overlay">
      <IonSpinner name="lines" color="primary" />
    </div>
  );
};

6. Customizing Spinner Style

Property Values Description
spinner dots, crescent, lines, bars, circles, grid Predefined spinner styles. Default is dots.
color primary, secondary, danger, light, dark Color of the spinner. Default is primary.
duration number Duration in milliseconds for the spinner animation. Default is 500.

Example: Custom Spinner Style

<ion-loading>
  <ion-spinner name="dots" color="secondary"></ion-spinner>
</ion-loading>
Note: The spinner property accepts predefined names. Custom SVG spinners are not supported directly in Ionic components.

7. Configuring Loading Backdrop

Property Values Description
backdropDismiss true | false Whether the loading indicator should be dismissed when clicking the backdrop. Defaults to false.
cssClass string | string[] Additional CSS classes to apply to the loading indicator's backdrop.
duration number Time in milliseconds after which the loading indicator will be automatically dismissed. If not set, it will remain until manually dismissed.
translucent true | false Whether the backdrop should be translucent. Defaults to false.

Example: Configuring Loading Backdrop

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

constructor(private loadingCtrl: LoadingController) {}

async presentLoading() {
  const loading = await this.loadingCtrl.create({
    message: 'Please wait...',
    backdropDismiss: true,
    translucent: true,
    duration: 3000
  });
  await loading.present();
}

8. Using Keyboard Close

Property Values Description
keyboardClose true | false Controls whether the keyboard close button should be shown. Defaults to false.

Example: Setting keyboardClose to true

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

async presentLoading() {
  const loading = await loadingController.create({
    message: 'Please wait...',
    keyboardClose: true
  });
  await loading.present();
}
Note: When keyboardClose is set to true, the loading indicator will be dismissed when the user taps the keyboard close button (usually located in the bottom right corner of the screen on mobile devices).

9. Handling Loading Events

Event Description Usage
ionLoadingDidPresent Fires after the loading indicator is presented 
loading.addEventListener('ionLoadingDidPresent', () => {
  console.log('Loading is now visible');
});
ionLoadingWillDismiss Fires before the loading indicator is dismissed 
loading.addEventListener('ionLoadingWillDismiss', () => {
  console.log('Loading will be dismissed');
});
ionLoadingDidDismiss Fires after the loading indicator is dismissed 
loading.addEventListener('ionLoadingDidDismiss', () => {
  console.log('Loading is now hidden');
});
Note: These events are useful for synchronizing other UI components or triggering actions based on the loading state.

10. Creating Inline Spinners

Property Values Description
type spinner Spinner type to display (e.g., dots, crescent, lines)
color primary, secondary, danger Color of the spinner (default: primary)
size small, medium, large Size of the spinner (default: medium)

Example: Basic Inline Spinner

<ion-spinner type="dots"></ion-spinner>

Example: Customized Spinner

<ion-spinner type="crescent" color="secondary" size="large"></ion-spinner>
Note: Spinners are typically used inline with content to indicate loading or processing states.

Was this article helpful?

Related Cheat Sheets