$ionicLoading without any text, just animated icon

ionic-v1
1

Is there a way to make $ionicLoading display with just an animated icon (e.g. - spinning wheel). I can sorta make it work by adding a html content to show the icon. But, it still displays the box around it.

2

What version of Ionic are you using?

You might also want to look at this : http://codepen.io/ionic/pen/pEter

Andy did some neat stuff with that.

3

I waited till beta 1 was released before I commented. But, the same behavior exists. You can see what I’m trying to do here:

Notice the black box around the icon. If there’s no text, I would rather it display just the icon without the box. Ideally, it would be nice if I could just specify the name of the icon or its corresponding class name.

4

I re-opened an issue that was supposed to solve it. The problem is that the .loading class effectively it’s own backdrop.

5

I was redirected here form an ionicforum post where I can’t see the text but only the ionic loading icon. But i don’t seem to find right solution.

For me, backdrop is working fine. but not seeing my message ‘fetching images’ though I give content as ’ Fetching images’

Following is my code

$scope.show = function(message){
      $scope.loading = $ionicLoading.show({
          content: '<i class="ion-loading-c"></i> '+ message,
          animation: 'fade-in',
          noBackdrop: false,
          maxWidth: 200,
          showDelay: 500
      });
  }

I see only that small loading icon with dimmed screen but not my message :frowning:

6

I’m not sure which release of Ionic you are using (nightly or Beta 13). However, I don’t think content is an option for the loading indicator in either case. Perhaps you wanted template ?

http://ionicframework.com/docs/api/service/$ionicLoading/

7

For the latest ionic version this works for me:

$ionicLoading.show({
  template: '<ion-spinner></ion-spinner>'+
            '<p>Login ...</p>'
});
1 Like