Ionic Framework - $ionicLoading: How to display both spinner and label?

Question

I don't see an option to display both spinner and label message! Docs.

Is there a simple way to do this or it must be something that I have to do myself?

Example (it doesn't have to look like this of course): http://www.jqueryscript.net/images/jQuery-Ajax-Loading-Overlay-with-Loading-Text-Spinner-Plugin.jpg

Thanks!

Answer 1

You can try this:

$ionicLoading.show({
  template: '<ion-spinner></ion-spinner> <br/> My Label'
});

Not tested, I think it will show up the spinner, but maybe no animation.

Answer 2

You can load your template:

<script id="loading.html" type="text/ng-template">
    <ion-spinner icon="bubbles"></ion-spinner>
    <p>LOADING...</p>
</script>

and in your code:

$ionicLoading.show({
      templateUrl: 'loading.html'
      // noBackdrop: true
    });

or, as Nam Pham suggested, defined an inline template:

$ionicLoading.show({
      template: '<ion-spinner icon="bubbles"></ion-spinner><p>LOADING...</p>'
      // noBackdrop: true
    });

If you want you can defined a different spinner.

You can see how it works here.