inAppBrowser加载页面时如何添加预加载器？

我需要一个预加载在inAppBrowser页面加载时的显示画面，我尝试使用HTML，CSS，JS和方法来添加它browser.executeScript(...)，browser.insertCSS(...)，预加载出现时，却出现了一个白色的屏幕后，还试图用做cordova-plugin-native-spinner和cordova-plugin-dialogs，但在这两种情况下，都会出现白屏。例如，我这样做是这样的：

import { Component } from "@angular/core";
import { Platform } from "ionic-angular";
import { InAppBrowser } from "@ionic-native/in-app-browser";
import { SpinnerDialog } from '@ionic-native/spinner-dialog/ngx';

@Component({
  template: "<p>....loading</p>"
})
export class HomePage {
  constructor(
    private iab: InAppBrowser,
    public platform: Platform,
    private spinnerDialog: SpinnerDialog) {
    platform.ready().then(() => {
      let browser = this.iab.create("https://www.google.com", "_blank", {
        location: 'no',
        clearcache: 'yes',
        clearsessioncache: 'yes'
      });

      browser.show();

      browser.on('loadstart').subscribe(() => {
        this.spinnerDialog.show();     
      }, err => {
        this.spinnerDialog.hide();
      })

      browser.on('loadstop').subscribe(()=>{
        this.spinnerDialog.hide();
      }, err =>{
        this.spinnerDialog.hide();
      })
    });
  }
}

或者：

import { Component } from "@angular/core";
import { Platform } from "ionic-angular";
import { InAppBrowser } from "@ionic-native/in-app-browser";

@Component({
  template: "<p>....loading</p>"
})
export class HomePage {
  constructor(private iab: InAppBrowser, public platform: Platform) {
    platform.ready().then(() => {
      let browser = this.iab.create("https://www.google.com", "_blank", {
        zoom: "no",
        location: "no"
      });

      browser.show();

      browser.on("loadstart").subscribe( () => {
        browser.executeScript({
          code:
            `document.body.innerHTML = "<div class='preloader'>
              <div class='preloader__row'>
                <div class='preloader__item'></div>
                <div class='preloader__item'></div>
              </div>
            </div>"`
        });
        browser.insertCSS({
          code: `.preloader {
          position: fixed;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          background: #e0e0e0;
          z-index: 1001;
        }

        .preloader__row {
          position: relative;
          top: 50%;
          left: 50%;
          width: 70px;
          height: 70px;
          margin-top: -35px;
          margin-left: -35px;
          text-align: center;
          animation: preloader-rotate 2s infinite linear;
        }

        .preloader__item {
          position: absolute;
          display: inline-block;
          top: 0;
          background-color: #337ab7;
          border-radius: 100%;
          width: 35px;
          height: 35px;
          animation: preloader-bounce 2s infinite ease-in-out;
        }

        .preloader__item:last-child {
          top: auto;
          bottom: 0;
          animation-delay: -1s;
        }

        @keyframes preloader-rotate {
          100% {
            transform: rotate(360deg);
          }
        }

        @keyframes preloader-bounce {
          0%,
          100% {
            transform: scale(0);
          }

          50% {
            transform: scale(1);
          }
        }

        .loaded_hiding .preloader {
          transition: 0.3s opacity;
          opacity: 0;
        }

        .loaded .preloader {
          display: none;
        }`
        });
        browser.executeScript({
          code: `window.onload = function () {
            document.body.classList.add('loaded_hiding')
            window.setTimeout(function () {
              document.body.classList.add('loaded')
              document.body.classList.remove('loaded_hiding')
            }, 500)
          }`
        });
      });
    });
  }
}

我不擅长Angular，Ionic和Cordova，如果您需要有关项目设置的更多信息，我可以提供。