how to add different spinner in html code while API calling in ionic 3 and Angular 4?

Hi, I am going to teach about how to add different spinner in HTML while API calling in ionic 3 and Angular 4.

   The previous post itself I taught about the API calling method.In this post, I am going to teach about how to add a different spinner while API calling.  

   This is spinner tag

 <ion-spinner name="ios-small" *ngIf="!people"></ion-spinner> 

  Here name defines as the default icon in the ionic and if people is null means spinner will be present are else it will disappear.

                     <ion-list *ngIf="people">  //*ngIf is used for spinner disappear

Let see a full example for a spinner.


Home.html

  <ion-header>
<ion-navbar navbar>
  <ion-title>
    Home
  </ion-title>
</ion-navbar>
</ion-header>


<ion-content>
  <ion-spinner name="ios-small" *ngIf="!people"></ion-spinner>
  <ion-list *ngIf="people">
    <ion-item *ngFor="let person of people">
      <ion-avatar item-left>
        <img src="{{person.picture.thumbnail}}">
      </ion-avatar>
      <h2>{{person.name.first}} {{person.name.last}}</h2>
      <p>{{person.email}}</p>
    </ion-item>
  </ion-list>
</ion-content>

Home.scss
page-chat-home {
  ion-spinner * {
    position: fixed;
    align-items: center;
    top: 43%;
    left: 48%;
    width: 75px;
    height: 75px;
    stroke: #444;
    fill: #222;
  }
}

Home.ts


import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { PeopleServiceProvider } from '../../providers/people-service/people-service';
import {Http} from '@angular/http';
/** * Generated class for the ChatHomePage page. * * See http://ionicframework.com/docs/components/#navigation for more info * on Ionic pages and navigation. */
@Component({
  selector: 'page-chat-home',
  templateUrl: 'chat-home.html',
  providers: [PeopleServiceProvider]
})
export class ChatHomePage {
  data: any;
  private people: 0;


  constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http,public peopleService: PeopleServiceProvider) {
    this.data = {};

      this. loadPeople()

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ChatHomePage');
  }

  loadPeople(){
    var temp = this;
    setTimeout(function(){
    temp.peopleService.load()
      .then(data => {
        temp.people = data;
      });
    }, 3000);
  }

}

Provider
     PeopleServiceProvider.ts
      import { Injectable } from '@angular/core';
      import { Http } from '@angular/http';
      import 'rxjs/add/operator/map';

     @Injectable()
      export class PeopleServiceProvider {
      private data: any;

      constructor(public http: Http) {
      console.log('Hello PeopleServiceProvider Provider');
       }

      load() {
      if (this.data) {
          return Promise.resolve(this.data);
      }

           return new Promise(resolve => {
           this.http.get('https://randomuser.me/api/?results=100')
        .map(res => res.json())
        .subscribe(data => {
             this.data = data.results;
          resolve(this.data);
          });
      });
     }

    }