Monday, February 2nd, 2009

Forget Chuck, Preloaders 3D right now!

Category: Ajax, Utility

I enjoy the US show Chuck (maybe because a geeky guy gets to hang with a beautiful woman? :) and there is a 3D episode to launch their new season. Our 2009 Ajax season relaunches an old favourite meme, the Ajax loaders (e.g. with a new 3D special.

Timur Gafforov has given us Preloaders which allows you to select size, speed, and from a set of 3D spinners. Make your users wait in style! :)

Posted by Dion Almaer at 12:41 am

4 rating from 91 votes


Comments feed TrackBack URI

What do you think people. Are there any changes required?

Comment by pratamishus — February 2, 2009

1. The size inputs on the form are extremely buggy. Use of arrow keys is broken, cursor placement is ignored when inputting numeric values.
2. 220px is allowed, but 220px is pixelated.
3. The slider should allow clicking on any point to set its value.
4. The images often don’t load, for no apparent reason.

Comment by eyelidlessness — February 2, 2009

when i read title and looked the image, i thought. “just another preloader, puff”… but after I thought that if ajaxian published it, there was some reason… I went to the site and discover that is the best image preloader creator I ve ever seen. I thought I ‘ll use it in all my sites and web app, starting from this evening (when Mr Anderson come Neo)
Great job
nunzio fiore

Comment by nunziofiore — February 2, 2009

1. Repaired – thank you :)
2. Yes… the maximum size for the most high quality is set automatically when you select a preloader. The higher amounts are given in case you might need it higher.
3. Yes, this is the thing to improve. Will repair it asap.
4. Images do not load because of the anti-flood system. Sorry :(.

Comment by pratamishus — February 2, 2009

What are the licenses for the images? Are they Open Source? GPL, LGPL, Apache…?

Comment by sos — February 2, 2009

All the images are open source…

Comment by pratamishus — February 2, 2009

Very nice concept! A little disappointed that the speed choice merely sets the gif frame length rather than keeping it smooth! A good solution would be to render each animation with varying number of frames, keeping the “FPS” the same… But that’s a right pain I imagine! Fine work, 5star

Comment by oopstudios — February 2, 2009

-> oopstudios – The system uses both – “FPS” change and frames amount in combination for speed change. You are right – this IS quite a pain just to make the frames amount vary, because in this case, the animations may jump crazily :).

Comment by pratamishus — February 2, 2009

“I enjoy the US show Chuck (maybe because a geeky guy gets to hang with a beautiful woman? :)”

Quick, name all the TV Shows where geeky guys get to hang with a beautiful woman! The Big Bang Theory, Two and a Half Men, Family Matters, Bewitched, Gilligan’s Island, Saved By The Bell, Frasier, Cheers … and that’s just sitcoms. Hmm, it might be easier to name the shows that have nerds that don’t get to hang with a beautiful woman. Are there any???

Wait, what was this post about again…? (aside from providing an excuse to try out the new whitespace on paragraph comments – thanks, Dion!)

Comment by broofa — February 2, 2009

@paramishus: Very cool animations! However, they would be much more useful (to me at least) if there were a way to get a PNG version, with full 8-bit transparency.

Yes, I know PNG doesn’t support animation. What I’d like is a single PNG that has each frame stacked one above the other. I could then set this as a CSS background and use JS to adjust the background position on a timer to do the animation.

How hard would that be to produce?

Comment by broofa — February 2, 2009

Well… as far as I understand, this was about the new 3D technology era. You see, before the projects of this kind used to make the preloaders in 2D. The newly opened project is couple of step ahead from others, while all others are just getting their audience with banal “beautiful women”.

That’s what I got from that :)

Comment by pratamishus — February 2, 2009

-> broofa: Well… PNG is a good idea. this is a bit different concept from what we have now. This could be a next step. We will consider it for future development. Maybe this will be an advancement to the project. Coz one of the main features of this project was – simplicity… Thank you broofa

Comment by pratamishus — February 2, 2009

Yeah, agreed on the “paininthearse” factor of doing it in the ideal way. How you have it thusfar is perfect in terms of simplicity and usability, keep it up!

I’m with Broofa on the PNG spriting idea! Maybe we can find a nice, clean, small animation javascript lib that would go with it perfectly? Now that would be woopedy-good!

Also, how about having the images load into the right-column rather than a lightbox? Replacing the “How-To” is OK as you can assume they’ve given it a once over!

Comment by oopstudios — February 2, 2009

-> oopstudios – moving the loading stuff to the right… yeah… that is a good idea… I will consult our designer about it.

Comment by pratamishus — February 2, 2009

yes, a progress bar, for example, divided in this way can be used not only for unlimited wait pupose, but also for a percentual of complete action, for example… ;)

Comment by nunziofiore — February 2, 2009

-> nunziofiore: this is just an image generator. A progress bar could be useful in case javascript is added… which is far beyond the current functionality. But we will consider this in future….

Comment by pratamishus — February 2, 2009

@pratamishus , i know. I meant that if You release the wiat lineard 2d as png in multilevel, as someone before me said, it can be useful too for progrsse bar non unlimited ;)

Comment by nunziofiore — February 2, 2009

I’m getting a lot of broken images as results. Too much load from Ajaxian traffic?

Comment by Nosredna — February 2, 2009

@pratamishus: re: PNG support, a couple quick comments …

For starters, I don’t think you need to decide on a javascript animation library – just provide the raw PNG image of animation frames. People will write their own, or find one that works for them. If/when they do, you can recommend that and possibly even provide the necessary JS code as part of the preloader download.

As for your current GIF transparency option, I do wonder what the point of that is. 1-bit transparency looks butt-ugly unless it’s composited onto a background of the same color… in which case you might as well just render the animation with that color in the background.

My .$02.

Comment by broofa — February 2, 2009

Very very cool! Kudos pratamishus.

Comment by iliad — February 2, 2009


Some people above talked about a javascript png animation.
So I created a mootools class to create a animated png.

You can find it here:

Comment by ArianStolwijk — February 3, 2009

Hi people!

I see a lot of responses since my last visit. First of all I would like to inform you that we have upgraded the web-site. Now the web-site uses a different “preview algorithm” We had received a lot of requests for particular upgrades, and voila… we have completed them. So now it is even more usable, you can contact us from the web-site and… of course more new preloaders :).

Regarding the questions of PNG stuff. Thanks to ArianStolwijk for the tool – very useful, and as I said, we will consider the PNG gererating in future.

To Nosredna – I have made the error more informative that explains the reason of the images not generated – this is an antiflood system. Sorry if it brings some difficulties, but we have to fight with hackers :).

With best regards,

Comment by pratamishus — February 15, 2009

we have to fight with hackers – I mean against hackers :))))

Comment by pratamishus — February 15, 2009

Leave a comment

You must be logged in to post a comment.