Ion-spinner not appearing

ionic-v1
1

Hi all,

I am having a problem getting the ion-spinner working.
Below is my code and the text displays fine but the spinner is not displaying!

		<div class="loading"
			 ng-show="play2.profiles.length==0">
			<p align="center">No users match your discovery!</p>
			<p>
				<ion-spinner icon="ripple"
							 class="spinner-assertive">
				</ion-spinner>
			</p>
		</div>

Does ion-spinner have any dependencies or am I missing something!
Maybe some other code is impacting it.Its contained within an ion-list.

I am using ionic 2.1, ionic serve and chrome.
I an actually see it in the developer console but why is it invisible:

<ion-spinner icon="ripple" class="spinner-assertive spinner spinner-ripple"><svg viewBox="0 0 64 64"><g fill="none" fill-rule="evenodd" stroke-width="3"><circle cx="32" cy="32" r="21.6029"><animate attributeName="r" begin="0s" dur="2s" values="0;24" keyTimes="0;1" keySplines="0.1,0.2,0.3,1" calcMode="spline" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" begin="0s" dur="2s" values=".2;1;.2;0" repeatCount="indefinite"></animate></circle><circle cx="32" cy="32" r="6.2412"><animate attributeName="r" begin="-1s" dur="2s" values="0;24" keyTimes="0;1" keySplines="0.1,0.2,0.3,1" calcMode="spline" repeatCount="indefinite"></animate><animate attributeName="stroke-opacity" begin="-1s" dur="2s" values=".2;1;.2;0" repeatCount="indefinite"></animate></circle></g></svg></ion-spinner>

Would like to hear if anyone has seen this issue or can help me resolve it.
Maybe there is no colour for some reason, I tried removing the class

I actually kind of find the solution while writing this so I will post anyway.
You have to add the CSS like below,

ion-spinner * {
width: 28px;
height: 28px;
stroke: #E45356;
fill: #FFFFFF;
}

HTH

2

Hi nmckeown,

I’m not sure about this but i think its may be because of the icon type you choosen “ripple”. In Ionic 2 Document this type of icon is not mentioned for ion-spinner, you can check it here.

Otherwise one alternative solution is you can use Loading Controller instead of ion-spinner.

3

Thanks vnyksy,

I am using $ionicLoading elsewhere but did not see a need for it.
Adding the css for ion-spinner resolved this. The ripple works.

<style>
ion-spinner * {
  stroke: #E45356;
  fill: #FFFFFF;
  height: 200px !important;
  width: 200px !important;
  text-align: center;
  position:fixed;
  top:30%;
  left:30%;
  right:30%;
  bottom:30%;
  margin-left: -2em;
}
</style>