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


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?


Place a loading icon in the template spot.


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?


You can style it with this


I assume that I have to change the value below?

            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…


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.


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


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.