Ugh. Surely thats what CSS transforms and transitions are for. Javascript animations should be a last resort...
The DOM for the spinner is created with Javascript, but the spinning is entirely CSS.
Spin.js, a pure JS spinner
21–30 of 70 posts
Re: Spin.js, a pure JS spinner
#22Are there any GIF loader generators that have all this options (speed, sizes, color) available? Could be good to use this as a preview, and then generate the final GIF.
Re: Spin.js, a pure JS spinner
#23Ugh. Surely thats what CSS transforms and transitions are for. Javascript animations should be a last resort...
The DOM for the spinner is created with Javascript, but the spinning is entirely CSS.
Ah ok thats better. The description did not make that clear. Should have read the code...
Re: Spin.js, a pure JS spinner
#24The only reason to use this is for scalable throbbers, and since you're only going to configure it once, it'd be much easier and more compact to just use a generated SVG+SMIL instead.
Re: Spin.js, a pure JS spinner
#25I think the possibility of dynamically changing the speed of the spinner is interesting. If your spinner was representing a file upload, for example, you could conceivably adjust the speed based on the current upload rate.
Doesn't that defeat the purpose, though? Progress indicators are designed to make you think things are going faster than they are. If you want to display accurate information, why not just display it?
Re: Spin.js, a pure JS spinner
#26A spinner generated from http://www.ajaxload.info/ is 673 bytes. The minified javascript from this is ~3K. I suppose the trade off is features and flexibility, but I don't find myself needing much out of my ajax spinners.
Also keep an eye on:
Re: Spin.js, a pure JS spinner
#27I hate to be that guy but this takes up 45% cpu under firefox for a simple spin animation.
Didn't realize this. Oh well. It's still cool and interesting, but I guess never that feasible.
Re: Spin.js, a pure JS spinner
#28Surprinsingly, it worked on my Samsung Focus.
It was spinning very slowly, but the Mango update supports CSS3 well it seems.
Re: Spin.js, a pure JS spinner
#29Earlier quoted context omitted.
It's not like animating a gif doesn't use up CPU cycles.
I accidentally upvoted you (trying to view your profile, I dont have downvote privileges). The CPU use of just about any GIF spinner is trivial compared to this, even in the browser this runs best in. Sure its a solid enough concept , but not something that'd you actually use in practice yet.
I actually agree that a JS spinner probably uses too much CPU to be justify its use, but I seriously doubt it would have that much effect on the battery.
EDIT:
It also seems the actual spinning is done with CSS, not JS
Re: Spin.js, a pure JS spinner
#30I think the possibility of dynamically changing the speed of the spinner is interesting. If your spinner was representing a file upload, for example, you could conceivably adjust the speed based on the current upload rate.
Doesn't that defeat the purpose, though? Progress indicators are designed to make you think things are going faster than they are. If you want to display accurate information, why not just display it?
"Progress indicators are designed to make you think things are going faster than they are."
Says who? I think progress indicators are intended to communicate more-granular details about the true progress towards some goal ... hence their name.