
Spin.js, a pure JS spinner - michokest
http://fgnass.github.com/spin.js/
======
seanalltogether
I hate to be _that guy_ but this takes up 45% cpu under firefox for a simple
spin animation.

~~~
mrinterweb
100% on Chromium 13

~~~
reemrevnivek
Same here, on Chromium 12 (wait, 12!?! Time to go fix that...) on Ubuntu 11.

------
Nycto
A 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.

~~~
tintin
Also keep an eye on:

    
    
      <input type="range"  min="0" max="100">
      <input type="number" min="0" max="100">
    

<http://www.w3schools.com/html5/html5_form_input_types.asp>

~~~
lycos1
Please don't link to w3schools. Thanks <http://w3fools.com/>

~~~
tintin
The w3schools site provides an excellent overview of the new input types and
there browser support in this case. So maybe next time please don't link to
w3fools (stupid site imho) but provide a better link.

~~~
nicksergeant
They might provide information but there's a good chance it's either half
bullshit, missing information or just completely wrong. Re-read W3Fools.

------
jsdalton
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.

~~~
Cushman
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?

~~~
uptown
"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.

~~~
Cushman
That doesn't even pass the sniff test. What progress indicator can you come up
with that provides more or better information in the same space than "95%
loaded" or "10.7/75MB of files copied"? Why do you think progress bars so
frequently do _not_ include that straightforward information?

It's a scam. It's a nice scam, of course, since it makes computers seem
faster, and that's most of what really matters, but a scam nonetheless.

~~~
__david__
It's not about better information, it's about speed of information. You can
look at a progress bar and instantly gauge the progress of your task.
"10.7/75MB copied" is more precise, but of less intrinsic value--I have to
calculate in my head where the halfway point is. To get a percentage in my
head out of those numbers is even harder.

~~~
Cushman
Try it. Half of 75 is about 37, so I'm a little under a third of the way to
the halfway point. I'll be a quarter done at ~19. Takes about two seconds.
Even faster for a computer, of course.

Now do that with a progress bar. You _can't_. What do you do, hold a piece of
paper under the bar and fold it in half? Then guess whether the bar is
measuring estimated time to completion, percent of data transferred, or
percent of files transferred?

You can ballpark it at a glance, sure. It's obviously under a quarter done.
Obviously over a tenth. Is it under a fifth? Maybe. We're just not good at
judging those things. And progress animations are deliberately designed to
make it _even harder_.

And don't get me wrong-- it's _nice_ to be able to ballpark it at a glance. It
reassures me that it's moving at all. It gives me some idea of how much longer
it will take. _It makes it seem like it's going faster._ That's what I'm
saying.

------
JohnnyBrown
Not realizing what was meant by "spinner", I spent a few seconds waiting for
the cool javascript demo to load before I realized.

------
dw0rm
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.

~~~
gregory80
I'm a fan of <http://preloaders.net/>

~~~
beernutz
That site is awesome! Very nicely laid out.

------
rawsyntax
This is cool just for fun, but practically there are sites like
<http://ajaxload.info/> that generate spinners for you, if you don't know how
to do it yourself

~~~
heliodor
I tried them and they produced poor quality. They couldn't even get the white
background correct! I suppose their #1 ranking on Google is making them
complacent.

<http://www.loadinfo.net/> is much better presented and actually respects the
color values you type in! (And no, I don't have any relationship with them.)

------
dalore
What's the battery drain like?

~~~
hasenj
It's not like animating a gif doesn't use up CPU cycles.

~~~
pharrington
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.

~~~
hasenj
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

~~~
user24
> It also seems the actual spinning is done with CSS, not JS

that means it'll be hardware accelerated where supported, which will increase
battery life.

------
pavel_lishin
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.

I wonder if this could happen in a regular browser, too?

------
alanh
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.

I have a hunch that’s correct, but don’t know.

I _do_ 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.)
[http://stackoverflow.com/questions/6937149/best-practice-
too...](http://stackoverflow.com/questions/6937149/best-practice-tool-for-
ajax-loading-indicator-as-animated-png-sprite/7018520#7018520)

------
Sephr
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.

------
justincormack
Ugh. Surely thats what CSS transforms and transitions are for. Javascript
animations should be a last resort...

~~~
onedognight
The DOM for the spinner is created with Javascript, but the spinning is
entirely CSS.

~~~
justincormack
Ah ok thats better. The description did not make that clear. Should have read
the code...

------
Jarred
Surprinsingly, it worked on my Samsung Focus.

It was spinning very slowly, but the Mango update supports CSS3 well it seems.

------
ck2
My gif spinner is 1152 bytes, not sure what you are using that's taking much
more.

------
uast23
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.

------
nicklovescode
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.

------
minikomi
For those who want something minimal..
<http://jsfiddle.net/4mrCU/2/embedded/result/>

------
paisible
Very cool - love the way it's configurable, good job.

------
jdelsman
Best thing I've seen all week. Yet another nail in the coffin for image assets
on the web. Thanks, CSS3!

------
dougaitken
Amazingly IE7 on XP (work PC) handled that like a trooper! Good job

------
wyclif
_Resolution independant_

Independent.

