Saturday, September 29th, 2007

Canvas Loading Indicator for the iPhone and beyond

Category: iPhone, JavaScript, Library

<p>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:

javascript
< view plain text >
  1. function getLoading(context, bars, center, innerRadius, size, color) {
  2. var animating = true,
  3.     currentOffset = 0;
  4.  
  5. function makeRGBA(){
  6.     return "rgba(" + [].slice.call(arguments, 0).join(",") + ")";
  7. }
  8. function drawBlock(ctx, barNo){
  9.     ctx.fillStyle = makeRGBA(color.red, color.green, color.blue, (bars+1-barNo)/(bars+1));
  10.     ctx.fillRect(-size.width/2, 0, size.width, size.height);
  11. }
  12. function calculateAngle(barNo){
  13.     return 2 * barNo * Math.PI / bars;
  14. }
  15. function calculatePosition(barNo){
  16.     angle = calculateAngle(barNo);
  17.     return {
  18.         y: (innerRadius * Math.cos(-angle)),
  19.         x: (innerRadius * Math.sin(-angle)),
  20.         angle: angle
  21.     };
  22. }
  23. function draw(ctx, offset) {
  24.     clearFrame(ctx);
  25.     ctx.save();
  26.     ctx.translate(center.x, center.y);
  27.     for(var i = 0; i<bars; i++){
  28.         var curbar = (offset+i) % bars,
  29.             pos = calculatePosition(curbar);
  30.         ctx.save();
  31.         ctx.translate(pos.x, pos.y);
  32.         ctx.rotate(pos.angle);
  33.         drawBlock(context, i);
  34.         ctx.restore();
  35.     }
  36.     ctx.restore();
  37. }
  38. function clearFrame(ctx) {
  39.     ctx.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);
  40. }
  41. function nextAnimation(){
  42.     if (!animating) {
  43.         return;
  44.     };
  45.     currentOffset = (currentOffset + 1) % bars;
  46.     draw(context, currentOffset);
  47.     setTimeout(nextAnimation, 50);
  48. }
  49. nextAnimation(0);
  50. return {
  51.     stop: function (){
  52.         animating = false;
  53.         clearFrame(context);
  54.     },
  55.     start: function (){
  56.         animating = true;
  57.         nextAnimation(0);
  58.     }
  59. };
  60. }

And then to use it:

javascript
< view plain text >
  1. var controller = getLoading(canvas.getContext("2d"), 9, {x:100, y:100}, 10, {width: 2, height:10}, {red: 0, green: 17, blue: 58});

Related Content:

Posted by Dion Almaer at 8:30 am
7 Comments

+++--
3.3 rating from 25 votes

7 Comments »

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:
http://nickynubbel.blogspot.com/2010/06/coole-iphone-kompatible-loading.html, however this post is in German.
Use Google translater instead: http://translate.google.de/translate?u=http%3A%2F%2Fnickynubbel.blogspot.com%2F2010%2F06%2Fcoole-iphone-kompatible-loading.html&sl=de&tl=en&hl=&ie=UTF-8

Comment by nubbel — June 5, 2010

Leave a comment

You must be logged in to post a comment.