Saturday, September 29th, 2007

Canvas Loading Indicator for the iPhone and beyond

Category: iPhone, JavaScript, Library

Adam van den Hoven wrote a Canvas Loading Indicator after he realised that animated gifs and the iPhone didn’t mesh.

First he wrote the basic spinner:

function getLoading(context, bars, center, innerRadius, size, color) {
var animating = true,
currentOffset = 0;

function makeRGBA(){
return “rgba(” + [], 0).join(“,”) + “)”;
function drawBlock(ctx, barNo){
ctx.fillStyle = makeRGBA(,,, (bars+1-barNo)/(bars+1));
ctx.fillRect(-size.width/2, 0, size.width, size.height);
function calculateAngle(barNo){
return 2 * barNo * Math.PI / bars;
function calculatePosition(barNo){
angle = calculateAngle(barNo);
return {
y: (innerRadius * Math.cos(-angle)),
x: (innerRadius * Math.sin(-angle)),
angle: angle
function draw(ctx, offset) {
ctx.translate(center.x, center.y);
for(var i = 0; i

Posted by Dion Almaer at 8:30 am

3.3 rating from 25 votes


Comments feed TrackBack URI

Adam, doesn’t see to have a demo currently, so for those who want immediate visual stimuli, I have thrown the example code up: Canvas Loading Example.

Pretty cool stuff, I didn’t know the iphone had Canvas support, opens up a whole new world of possibilities.

Comment by JP — September 29, 2007

I must be missing something here. A while back, I wrote a small app for the iPhone and it uses an animated GIF stolen from this page. Works fine on my iPhone…

Comment by Julien Lecomte — September 29, 2007

Good find.

Comment by Jordan — September 29, 2007

Canvas for displaying animated GIFs…!
Makes me think about the time I nuked a couple of insects in my backyard… ;)
Still impressive though :)

Comment by Thomas Hansen — September 30, 2007

Cool stuff.

Comment by DESIGNEXPANSE.COM — October 1, 2007

thanks good post

Comment by klip izle — November 11, 2007

Canvas is cool, but take a look at my approach using SVG animations. Works fine on every Webkit, including MobileSafari on the iPhone:, however this post is in German.
Use Google translater instead:

Comment by nubbel — June 5, 2010

Leave a comment

You must be logged in to post a comment.