New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Loading icons missing #111
Comments
Yeah, same here. All the loading spinners are not showing while the regular icons are working fine. Am I missing something? |
New version (v2) change from "ion-loading-..." to "ion-load-...". But not sure how to make it spinning :/ |
Oh no, they completely remove animated icons (ion-loading-...). Why? |
You can use this hack while we get and official announcement :) Append /* 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); } |
There is another way to do this if you still keep old version. |
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? |
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. |
Fantastic! :) |
Great! Thanks for the update Ben! |
👍 |
@bensperry Do you have any release date for the new spinners? |
I used font awesome instead.. Works good.
|
They will be included in the next version of Ionic. Here's a preview: http://ionicframework.com/docs/nightly/api/directive/ionSpinner/ |
👍 |
@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! 💃 Thanks! |
and the point of that comment was .. ? |
had to include whole fontawesome just for spinner :( |
-1 |
ion-spinners are available now. |
That's right, with the release of RC 1.0 our new svg spinners are now out! :) |
so now we can't have spinning icons without whole ionic framework in dependencies? it was possible with Ionicons 1.5. |
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 |
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... |
Here's another example: http://codepen.io/perrygovier/pen/dPqXyE?editors=110 |
@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). |
ion-spinner cannot be used in place of placeholder-icon ... any suggestion? |
@timlind ion-spinner doesn't exist anymore. |
Thanks Perrygovier. After using this link, all ion-ios icons are working.Below is the reference.Use it in your head section. |
loading icons (.ion-loading-a, .ion-loading-b, etc.) are missing from the latest sass and less files
The text was updated successfully, but these errors were encountered: