ionic spinner

1<!-- Default Spinner -->
2<ion-spinner></ion-spinner>
3
4<!-- Lines -->
5<ion-spinner name="lines"></ion-spinner>
6
7<!-- Lines Small -->
8<ion-spinner name="lines-small"></ion-spinner>
9
10<!-- Dots -->
11<ion-spinner name="dots"></ion-spinner>
12
13<!-- Bubbles -->
14<ion-spinner name="bubbles"></ion-spinner>
15
16<!-- Circles -->
17<ion-spinner name="circles"></ion-spinner>
18
19<!-- Crescent -->
20<ion-spinner name="crescent"></ion-spinner>
21
22<!-- Paused Default Spinner -->
23<ion-spinner paused></ion-spinner>

1import { Component } from '@angular/core';
2import { LoadingController } from '@ionic/angular';
3
4@Component({
5  selector: 'loading-example',
6  templateUrl: 'loading-example.html',
7  styleUrls: ['./loading-example.css']
8})
9export class LoadingExample {
10  constructor(public loadingController: LoadingController) {}
11
12  async presentLoading() {
13    const loading = await this.loadingController.create({
14      message: 'Please wait...',
15      duration: 2000
16    });
17    await loading.present();
18
19    const { role, data } = await loading.onDidDismiss();
20    console.log('Loading dismissed!');
21  }
22
23  async presentLoadingWithOptions() {
24    const loading = await this.loadingController.create({
25      spinner: null,
26      duration: 5000,
27      message: 'Click the backdrop to dismiss early...',
28      translucent: true,
29      cssClass: 'custom-class custom-loading',
30      backdropDismiss: true
31    });
32    await loading.present();
33
34    const { role, data } = await loading.onDidDismiss();
35    console.log('Loading dismissed with role:', role);
36  }
37}