Happy to see the ion-spinner component added in Beta.2, but


#1

I’ve updated my app and added a spinner as follows:
<ion-spinner></ion-spinner>

Unfortunately the only thing I get is a black circle where the spinner is expected to be. Anybody else getting this result? I’m guessing it’s unable to find the spinner svg, nor can I in searching the code.


#2

Bumping this to see if anybody has tried using the Spinner component successfully yet?


#3

If you look the source code, you can see that you can give a name

<ion-spinner name="ios"></ion-spinner>
<ion-spinner name="ios-small"></ion-spinner>
<ion-spinner name="bubbles"></ion-spinner>
<ion-spinner name="circles"></ion-spinner>
<ion-spinner name="crescent"></ion-spinner>
<ion-spinner name="dots"></ion-spinner>

#4

Have you try bubbles on android? I can see squares around the main dot.


#5

I only tried the “dots” on a BB10, and it does not look the same as the one on the web. That’s weird.


#6

Uhmm can you find the spinner component in the ionic 2 docs? Where?


#7

you have to look to the source code here


#8

I’ve tried all the spinner types and none of them work for me.

Besides, per the source if you do not specify a specific spinner you should get the platform default.


#9

Update:

I’ve started an entirely new project and within that the spinners work as advertised. They aren’t working in a pre-existing project that I upgraded.

Any ideas?


#10

Any error output?

Paste you code please.


#11

No error output at all. Regarding code it’s just

<ion-spinner><\ion-spinner>

beyond that I’d have to post the entire project.


#12

Seems to be working just fine for me. Please see this codepen ->


#13

As I stated in an above post it works when I started a new project. When I upgraded from beta.1 to beta.2 it doesn’t.


#14

Sorry I missed that detail.

I would try following -

a) Delete the www/build directory
b) Delete node_modules
c) make sure npm install -g ionic@beta (to get the latest version)

issue npm install in your project folder

and then issue

ionic serve --lab

Regards
Kapil


#15

Hope that it was a typo in your code. It should be a forward slash


#16

Yes, typo, my thumbs and phone keyboards don’t much get along!


#17

One thing you might try is to change all mentions of “ionic-framework” to “ionic-angular” in ionic-config.js, especially the sass path.


#18

@rapropos

Need to do that to get anything to work! :slightly_smiling:

I gave up and moved all my work to a fresh install of beta.2 and all is well for the moment with the one exception that styling the spinner isn’t working!


#19

Need to do that to get anything to work!

In my case, upgrading a project that was initially begun with an earlier version ended up with both ionic-framework and ionic-angular under node_modules, which resulted in the CSS being built from older source that did not include the necessary stuff for the spinner. I had your exact same giant black circle, which is how I found this topic. It was only after I manually nuked ionic-framework out of node_modules, that I was alerted to stale references in ionic.config.js. After changing those, the CSS files contain the spinner rules and the spinner behaves as expected.


#20

That probably would have saved me some time!

Thanks for the replies!