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.
I'm a fan of http://preloaders.net/
Spin.js, a pure JS spinner
41–50 of 70 posts
Re: Spin.js, a pure JS spinner
#42I 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?
I use indicators whenever I need to provide feedback for viewers waiting for some action to take place so they don't think that something froze/disconnected/isn't responding.
Re: Spin.js, a pure JS spinner
#43I 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.
If you want to show actual progress and have actual data indicating progress, there are much better ways to show it.
- Progress bar. Indicates estimated percent completed at a glance. Perfect for uploads/downloads where file size and progress is known.
- Text and/or line/sparkline graph. If you only know speed, this is how to show it.
How is the user supposed to know spin rate means anything?
Re: Spin.js, a pure JS spinner
#44Earlier quoted context omitted.
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 no…
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.
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.
Re: Spin.js, a pure JS spinner
#45It 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...
Re: Spin.js, a pure JS spinner
#46Earlier quoted context omitted.
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 no…
Progress bars are what you make them. There are many accurate progress bars in use(Windows 7 file copy, YouTube progress bar). They are not inherently designed to mislead.
I think buffer indicators are a different beast from progress bars-- the timeline is a UI element, and the buffer indicator shows something concrete relating to it.
But I don't think I've said progress bars are bad. They're useful! It's just the idea of "maybe we can make progress indicators more accurate" that's ridiculous.
Re: Spin.js, a pure JS spinner
#47Earlier quoted context omitted.
Progress bars are what you make them. There are many accurate progress bars in use(Windows 7 file copy, YouTube progress bar). They are not inherently designed to mislead.
I think buffer indicators are a different beast from progress bars-- the timeline is a UI element, and the buffer indicator shows something concrete relating to it. But I don't think I've said progress bars are bad . They're useful! It's just the idea of "maybe we can make progress indicators more accurate" that's ridiculous.
jsdalton was merely proposing ways this demo could be enhanced by linking it's behavior to a source of data. You're the one going all over the place with your disdain for progress bars, suggesting they are inaccurate & "a scam", then taking it back or questioning what a progress bar is... I am really not sure how a progress bar for a video buffer is all that different from a progress bar for a file transfer.
Re: Spin.js, a pure JS spinner
#48I hate to be that guy but this takes up 45% cpu under firefox for a simple spin animation.
3% cpu in Safari 5.1
Re: Spin.js, a pure JS spinner
#49Earlier quoted context omitted.
I think buffer indicators are a different beast from progress bars-- the timeline is a UI element, and the buffer indicator shows something concrete relating to it. But I don't think I've said progress bars are bad . They're useful! It's just the idea of "maybe we can make progress indicators more accurate" that's ridiculous.
jsdalton was merely proposing ways this demo could be enhanced by linking it's behavior to a source of data. You're the one going all over the place with your disdain for progress bars, suggesting they are inaccurate & "a scam", then taking it back or questioning what a progress bar is... I am really not sure how a progress bar for a video buffer is all that different from a progress bar for a file transfer.
No idea where you see disdain, and I certainly haven't taken anything back. Progress bars are inaccurate, in the sense that they're simply not a good way to convey accurate information about task completion to a human user. Them's just facts.
But that's not bad. I said it was a nice scam. Sometimes it's good to be fooled. Putting a minigame during the load screen doesn't make the real game load any faster, but it makes the time seem to pass faster, and that's nice. Doesn't make it not fooling.
As for streaming video, as I said already, a video buffer indicator is tied to a UI element in the timeline. It tells me where I can scrub to in the timeline and have it play video immediately without buffering. That's useful.
It's not useful as a progress indicator, for telling me how much longer I need to wait to watch the video-- because my computer is way, way better at doing that math than I am. I would much rather have a simple indicator that tells me, given my current download speed, whether I will have to wait for buffering before it finishes playing, and if so, how long I have to wait until that is not the case. In fairness, you can get a decent idea of that based on whether or not the buffer indicator is advancing away from the playhead, which is another detail that distinguishes a streaming buffer from other sorts of progress indicators.
Re: Spin.js, a pure JS spinner
#50I 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.
If you want to show actual progress and have actual data indicating progress, there are much better ways to show it. - Progress bar. Indicates estimated percent completed at a glance. Perfect for uploads/downloads where file size and progress is known. - Text and/or line/sparkline graph. If you only know speed, this is how to show it. How is the user supposed to know spin rate means anything?
I completely agree with you, but the user might have been trained by his iPhone to relate the speed of the spinner to the data transfer speed. (The spinner in the status bar of the iPhone indicating network activity has a different speed when you're on EDGE or GPRS versus when you're on 3G).