TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Spin.js, a pure JS spinner

548 pointsby michokestalmost 14 years ago

20 comments

seanalltogetheralmost 14 years ago
I hate to be <i>that guy</i> but this takes up 45% cpu under firefox for a simple spin animation.
评论 #2900105 未加载
评论 #2899995 未加载
评论 #2899976 未加载
评论 #2900063 未加载
评论 #2899983 未加载
评论 #2900083 未加载
评论 #2906158 未加载
评论 #2901347 未加载
评论 #2900363 未加载
评论 #2900697 未加载
Nyctoalmost 14 years ago
A spinner generated from <a href="http://www.ajaxload.info/" rel="nofollow">http://www.ajaxload.info/</a> 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.
评论 #2900360 未加载
评论 #2900022 未加载
评论 #2902704 未加载
评论 #2900034 未加载
jsdaltonalmost 14 years ago
I 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.
评论 #2900929 未加载
评论 #2900351 未加载
评论 #2902130 未加载
JohnnyBrownalmost 14 years ago
Not realizing what was meant by "spinner", I spent a few seconds waiting for the cool javascript demo to load before I realized.
dw0rmalmost 14 years ago
Are 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.
评论 #2900806 未加载
rawsyntaxalmost 14 years ago
This is cool just for fun, but practically there are sites like <a href="http://ajaxload.info/" rel="nofollow">http://ajaxload.info/</a> that generate spinners for you, if you don't know how to do it yourself
评论 #2906699 未加载
dalorealmost 14 years ago
What's the battery drain like?
评论 #2900181 未加载
pavel_lishinalmost 14 years ago
Tested it on my iPhone 3gs - after some scrolling around and zooming (trying to reach the controls) the spinner "locked up" - it's no longer spinning, every bar is simply pulsing together in time, like a luminescent jellyfish.<p>I wonder if this could happen in a regular browser, too?
alanhalmost 14 years ago
It was noted in this thread that this consumes a relatively large amount of resources, and it was suggested that flipping through PNG frames would be less CPU-intensive.<p>I have a hunch that’s correct, but don’t know.<p>I <i>do</i> however have an unanswered question on Stack Overflow seeking, ideally, a generator of JavaScript + PNG throbbers. First one to make ajaxload.info with PNG sprites and/or Canvas generation in supported browsers wins! (No need for most of the hideous ajaxload designs though.) <a href="http://stackoverflow.com/questions/6937149/best-practice-tool-for-ajax-loading-indicator-as-animated-png-sprite/7018520#7018520" rel="nofollow">http://stackoverflow.com/questions/6937149/best-practice-too...</a>
Sephralmost 14 years ago
The 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.
justincormackalmost 14 years ago
Ugh. Surely thats what CSS transforms and transitions are for. Javascript animations should be a last resort...
评论 #2900303 未加载
Jarredalmost 14 years ago
Surprinsingly, it worked on my Samsung Focus.<p>It was spinning very slowly, but the Mango update supports CSS3 well it seems.
ck2almost 14 years ago
My gif spinner is 1152 bytes, not sure what you are using that's taking much more.
uast23almost 14 years ago
Read through quickly at first and got mislead by 'target' assuming that anything passed as a target will start spinning and tried to spin an image :), which of course is not the case. Nice effort though.
nicklovescodealmost 14 years ago
This would be perfect for canvas games. It means that image.gif doesn't have to load, which typically requires initializing a new Image() and attaching an onLoad function. This simplifies all that.
评论 #2908441 未加载
minikomialmost 14 years ago
For those who want something minimal.. <a href="http://jsfiddle.net/4mrCU/2/embedded/result/" rel="nofollow">http://jsfiddle.net/4mrCU/2/embedded/result/</a>
paisiblealmost 14 years ago
Very cool - love the way it's configurable, good job.
jdelsmanalmost 14 years ago
Best thing I've seen all week. Yet another nail in the coffin for image assets on the web. Thanks, CSS3!
dougaitkenalmost 14 years ago
Amazingly IE7 on XP (work PC) handled that like a trooper! Good job
wyclifalmost 14 years ago
<i>Resolution independant</i><p>Independent.