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

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.

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

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>

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

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

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

you have to look to the source code here

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.

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?

Any error output?

Paste you code please.

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

<ion-spinner><\ion-spinner>

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

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

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.

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

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

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

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

@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!

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.

That probably would have saved me some time!

Thanks for the replies!