How do I show ion-loading icon in the center of screen?

1

I am using navigator.geolocation.getCurrentPosition to get users current position and want to show icon-loading when it start and turn it off when success or error callback is executed.

What would be the proper way to implement this in Ionic?

2

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

Place a loading icon in the template spot.

3

http://codepen.io/gnomeontherun/pen/EAmqD

@metric152
It was good example but my icon looks tiny compare to general one.

What is the css class/id name that I might have overwritten?
image

4

You can style it with this
http://ionicframework.com/docs/api/directive/ionSpinner/

5

I assume that I have to change the value below?

$ionicLoading.show({
            template: '<ion-spinner icon="ripple" class="spinner-energized"></ion-spinner>',
	    content: 'Loading',
	    animation: 'fade-in',
	    showBackdrop: false,
	    maxWidth: 200,
	    showDelay: 0
	  });

It does not show anything now.
changing the value in global CSS of .spinner would not work for me…

6

I added this to the codepen and it made the spinner bigger
.spinner svg{
height: 50px !important;
width: 50px !important;
}
you can actually leave the template and content out.

7

hmm i dont know why mine is not changing the size at all…

8

created new template and reinitialized every source file. now it works.

I was working with old template that has project_name/code/www
now it is project_name/www

and all the ion-loading stuff is working correctly.