Ionicons: Loading icons missing

[jwohlfert23]

loading icons (.ion-loading-a, .ion-loading-b, etc.) are missing from the latest sass and less files

[bergjs]

Yeah, same here. All the loading spinners are not showing while the regular icons are working fine. Am I missing something?

[marcalj]

New version (v2) change from "ion-loading-..." to "ion-load-...". But not sure how to make it spinning :/

[marcalj]

Oh no, they completely remove animated icons (ion-loading-...). Why?

[marcalj]

You can use this hack while we get and official announcement :)

Append ion-spin-animation class to any icon.

/* Hack for ionicicons v2 (no animation code) */
.ion-spin-animation { -webkit-animation: spin 1s infinite linear; -moz-animation: spin 1s infinite linear; -o-animation: spin 1s infinite linear; animation: spin 1s infinite linear; }

@-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(359deg); } }
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(359deg); } }
@-o-keyframes spin { 0% { -o-transform: rotate(0deg); }
    100% { -o-transform: rotate(359deg); } }
@-ms-keyframes spin { 0% { -ms-transform: rotate(0deg); }
    100% { -ms-transform: rotate(359deg); } }
@keyframes spin { 0% { transform: rotate(0deg); }
    100% { transform: rotate(359deg); } }
.ion-load-a.ion-spin-animation { -webkit-animation-timing-function: steps(8, start); -moz-animation-timing-function: steps(8, start); animation-timing-function: steps(8, start); }

[silverhair2010]

There is another way to do this if you still keep old version.
Adding line _@import "ionicons-animation";_ to _ionicicons.scss_ then re-run gulp command

[ozexpert]

That hack doesn't work on the device (im on kitkat 4.4.4), although it works on Chrome browser. Any other solution? or just use animated gifs?

[bensperry]

We are working on a new loading spinners pack. They will be significantly better than what was there before. Apologies for the wait... we're almost done and we think you'll love them.

[marcalj]

Fantastic! :)

[bergjs]

Great! Thanks for the update Ben!

[kirkstrobeck]

:+1:

[sandelius]

@bensperry Do you have any release date for the new spinners?

[ozexpert]

I used font awesome instead.. Works good.
On Jan 30, 2015 12:42 AM, "Tobias Sandelius" [email protected]
wrote:

@bensperry https://github.com/bensperry Do you have any release date
for the new spinners?

—
Reply to this email directly or view it on GitHub
https://github.com/driftyco/ionicons/issues/111#issuecomment-72170300.

[bensperry]

They will be included in the next version of Ionic. Here's a preview: http://ionicframework.com/docs/nightly/api/directive/ionSpinner/

[kirkstrobeck]

:+1:

[marcalj]

@bensperry Did you plan to pack this awesome directive standalone? I'm using ionicons with Twitter Bootstrap on private admin dashboard, not with ionic framework. Can't wait! :dancer:

Thanks!

[anthonator]

Any update on this? I'm kind of baffled this was removed without a replacement. I think a deprecation would have been more appropriate.

[kirkstrobeck]

and the point of that comment was .. ?

[e-oz]

had to include whole fontawesome just for spinner :(
Waiting for your spinners.

[mwawrusch]

-1

[toddhalfpenny]

ion-spinners are available now.
I have a quick post on replacing an old icon with an ion-spinner
http://bit.ly/ionic_spinners_rc0

[bensperry]

That's right, with the release of RC 1.0 our new svg spinners are now out! :)

http://ionicframework.com/docs/api/directive/ionSpinner/

[e-oz]

so now we can't have spinning icons without whole ionic framework in dependencies? it was possible with Ionicons 1.5.

[perrygovier]

You can, the icons are still there, we just took out the rotation CSS to keep things lean. The trouble is you'll get a "wobble" with some devices. It's a case where if you fix it for some, you break it for others. The only real way to get animations that have no chance of wobbling is to not us rotating font icons. If you're ok with some wobbling, you can certainly add the CSS back in.

Here's an example http://codepen.io/jabranr/pen/GLFjv?editors=110

[e-oz]

each tab with new spinners use 64% of CPU in Chrome 41.0.2272.74 beta (64-bit), MBPr late 2013.

@perrygovier thanks for example, but I don't see in this example, how I can use directives with just CSS file and without any JS. But will just try...

[perrygovier]

Here's another example: http://codepen.io/perrygovier/pen/dPqXyE?editors=110

[e-oz]

@perrygovier thank you! I'll copy-paste it and will just add "spin" css class to all elements I want to spin (and with price of wobbling, I see).
Thank you!

[timlind]

ion-spinner cannot be used in place of placeholder-icon ... any suggestion?

[jneubrand]

@timlind ion-spinner doesn't exist anymore.

[deba9090]

Thanks Perrygovier. After using this link, all ion-ios icons are working.Below is the reference.Use it in your head section.
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />