Crazy circles is a nice visual illusion. “Loading…” windows tend to be boring. Combining both of them may keep your users entertained while waiting for data to load. Even best if it can be dynamically configured to fit your website 🙂 .
Examples
Crazy Circles
Crazy Circles is a visual illusion which happens when different balls bouncing inside of a circle create the impression of a circular movement, where in reality, the movement of each ball is straight (not really… when implementing it, I found out that to give the correct illusion, each ball animation should be eased using a sinus function).
Implementation Highlights
For rendering the graphs I used Raphaël which simplifies the work with vector graphics. Its big advantage over the HTML 5 canvas is that it is compatible with many old browsers. The only thing for which it didn’t work was to animate independent elements at the same time. After a while the synchronization was lost, the reason why I had to do the animation myself.
While doing the animation, I copied/pasted the way Raphaël was choosing the best animation callback. It is supposedly multi-browsers compatible:
// animation prototype
var requestAnimFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
setTimeout(callback, 16);
};
For the circles animation itself, well this is just remembering all the old trigonometry which is somewhere rusted in your brain. To do the go crazy mode, I based myself on a nice article on collision:
When Worlds Collide: Simulating Circle-Circle Collisions.
Put it all together and you have a nice Loading… effect. The full source can be found on: crazy.circles.js.
Instructions on how to use it can be found on the dedicated page: Crazy Circles.
Playing around
On the example below, you may play around with all the possible configurations.
Have fun