ionicLoading spinner

ionic-v1
1

Is there a simple way to increase the size of the default spinner in the ionicLoading service? I can’t seem to find anything on it.

Thanks,
Jonathan

2

I think there is. According to their SCSS file for variables, there is a variable for that:

https://github.com/driftyco/ionic/blob/master/scss/_variables.scss#L638

1 Like
3

Perfect, thanks for the help!

4

Have you tried this :

.spinner svg {
  width: 28px;
  height: 28px;
  stroke: #444;
  fill: #444;
}

it is documented @ http://ionicframework.com/docs/api/directive/ionSpinner/

5

This does not do the intended change, instead of the whole component occupying a bigger area, the individual items in the spinner, say the individual bubbles inside the bubble spinner get bigger.

6

Managed to increased the size of ion-spinner with css zoom :

Sample:
#wait ion-spinner{
position: relative;
display: inline-block;
width: 28px;
height: 28px;
zoom: 5;
}

7

I refer to this documentation but unable to make the dark color default backdrop disappear. My purpose is that the dark background change to same color with background or no color.
http://ionicframework.com/docs/v1/api/service/%24ionicLoading/

$ionicLoading.show({noBackdrop: true, duration: 1800,
  template: '<ion-spinner icon="lines" class="spinner-energized"></ion-spinner> <br/> My Label'
});