framework7

Open full view…

Pull to refresh preloader not spinning?

Matthew B
Wed, 11 Jun 2014 23:05:59 GMT

Within my app, everything in the pull to refresh is working but the preloading spin animation. The spinner is showing up, it just doesn't spin.

Vladimir Kharlampidi
Fri, 13 Jun 2014 20:34:35 GMT

Can you capture video if that?

csalopek
Tue, 24 Jun 2014 15:26:19 GMT

I'm having the same issue. The kitchen-sink example is working just fine, but even simply adding <span class="preloader"></span> anywhere on the page does not produce a spinning preloader like it does in the example. I keep thinking I'm missing something in the javascript. I've also tried myApp.showPreloader(), which does show the Loading... modal with the preloader, but it doesn't spin either.

arash01
Tue, 24 Jun 2014 15:29:05 GMT

Same problem for me! I posted about it before. Still not spinning.

csalopek
Tue, 24 Jun 2014 15:40:56 GMT

I just tried opening my mobile app using the Desktop Chrome, and the preloaders do not spin, but they do in the kitchen-sink example. Then, I tried opening my app in the Desktop Safari, and the preloaders in my mobile app are spinning. However, they do not spin in Mobile Safari, which makes me think they will not spin in a WebView using PhoneGap, but I haven't tried that yet.

Vladimir Kharlampidi
Tue, 24 Jun 2014 16:25:29 GMT

Guys, seems to be it is a bug caused by some specific layout, because as you see it works in Kitchen sink and in few my apps. But to detect and debug it i need to see live example

csalopek
Tue, 24 Jun 2014 17:30:01 GMT

OK, I figured out my problem was because I'm using Font Awesome. As soon as I comment out the css, the preloader works. Here is the CDN of the Font Awesome I'm including in my project: <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>

csalopek
Tue, 24 Jun 2014 18:03:35 GMT

I was able to use the various spinners from the Font Awesome CSS just by changing class="preloader" to one from Font Awesome such as class="fa fa-spinner fa-spin". The only issue you will have is using them in the Framework 7 functions for app.showPreloader or app.showIndicator, but you can extend your own functions to pass in a custom preloader instead.

arash01
Wed, 25 Jun 2014 00:50:39 GMT

@csalopek I use font-awsome also ;) There is same class name for spin in both css library. SO if you want to use framework7 spinner, just place framework7 css link after font-awsome's!

csalopek
Wed, 25 Jun 2014 12:12:58 GMT

@arash01 Thanks for the tip. I just went ahead and used a couple of the spinners from Font Awesome instead. I'm using the fa-spinner when I need a loading indicator, and fa-refresh for my pull-to-refresh.

youssefdecrimineel
Wed, 25 Jun 2014 14:27:30 GMT

Got the same problem, also having Font Awesome, but arash01 his solution works. You might want to change the animation name though to something like f7-spin instead of just spin..

Vladimir Kharlampidi
Wed, 25 Jun 2014 17:49:21 GMT

Ok, i will change preloader animation name, but i am really curious that Font Awesome uses such common animation names. By the way i would not really recommend you guys to use this fonts lib, its icons are not really mobile friendly and looks not familiar to app users. There are better mobile apps icon fonts

Vladimir Kharlampidi
Wed, 25 Jun 2014 17:50:00 GMT

...and all your apps will have same icons ;)

seme1
Thu, 26 Jun 2014 11:02:37 GMT

Vladimir: it would be nice to suggest other font libraries which you think are best suited with F7 for the mobile experience.

csalopek
Thu, 26 Jun 2014 12:31:05 GMT

Here's one that I would suggest: http://ios7-icon-font-demo.herokuapp.com/ My original app is using these, and I have added my own to the library too, but I wanted something I didn't have to maintain myself, so since I am in the process of converting my app to use F7 I decided to give Font Awesome a try.

Vladimir Kharlampidi
Thu, 26 Jun 2014 19:51:37 GMT

Here is more: 1) Not font, but nice free icons: http://www.pixeden.com/media-icons/tab-bar-icons-ios-7 http://www.pixeden.com/media-icons/tab-bar-icons-ios-7-vol2 http://www.pixeden.com/media-icons/tab-bar-icons-ios-7-vol3 http://www.pixeden.com/media-icons/tab-bar-icons-ios-7-vol4 http://www.pixeden.com/media-icons/tab-bar-icons-ios-7-vol5 http://www.pixeden.com/media-icons/tab-bar-icons-ios-7-vol6 2) This one (from competitor framework :)) http://ionicons.com/ 3) This is the best from my point, but pretty expensive: https://useiconic.com/