手順

Ionicでローディング画面を表示するにはLoadingControllerを使用します。
LoadingControllerの使い方の概要は下記の通りです。

methods	memo
create	ローディング画面を作成
present	ローディング画面を表示
dismiss	ローディング画面を非表示化

詳細は、下記を参照頂ければ！※Ionicの公式ドキュメントです。

↓Loadingコンポーネントの説明とデモ ionicframework.com

↓LoadingControllerのAPIドキュメント ionicframework.com

今回は、現在開発中のMoook.FrontendでAPIからデータを取得中にローディング画面を表示してみました。
下記がソースコードです。※必要部分だけ抜粋しています。

// ローディング用のモジュールをインポート
import { LoadingController } from 'ionic-angular';

@IonicPage()
  
@Component({
  selector: 'page-page-index',
  templateUrl: 'page-index.html',
})

export class PageIndexPage {
  pages = [];
  result = '';
  api_url = 'https://moook.herokuapp.com/pages.json';
  loader = null;
  // コンストラクタでLoadingControllerの変数を宣言
  constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http, public loadingCtrl: LoadingController) {
    // ロード画面を表示
    this.presentLoading();
    // APIからデータを取得
    this.get_pages_data();
  }

  presentLoading() {
    this.loader = this.loadingCtrl.create({
      content: "Please wait...",  // 表示する文字列
      duration: 3000  // タイムアウト値(自動で消えるまでの時間)
    });
    // ローディング画面を表示
    this.loader.present();
  }

  get_pages_data(){
    this.http.get(this.api_url).subscribe(
      respons => {
        let result = respons.text();
        this.pages = [];
        JSON.parse(result || null).forEach(data => {
          this.pages.push(new Page(data)); 
        });
        if (this.loader != null) {
          // ローディング画面を非表示
          this.loader.dismiss();
        }
      },
      error => {
        let result = 'faild : '+ error.statusText;
        console.log(result);
      }
    );
  }
}