README.md

Make a loading gif with gifsicle, node-canvas, and graphicsmagick.

Makefile

TOGIF = gm mogrify -format gif

all: anim.gif

*.pre.png: loading.js
  node loading.js

*.pre.gif: *.pre.png
	$(TOGIF) *.pre.png

anim.gif: *.pre.gif
	gifsicle -d10 --loop *.pre.gif > anim.gif

package.json

{
  "name": "img",
  "version": "0.0.0",
  "description": "ERROR: No README.md file found!",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": "",
  "author": "",
  "license": "BSD",
  "dependencies": {
    "canvas": "~1.0.1",
    "pad": "0.0.4"
  }
}

progress.js

var Canvas = require('canvas'),
    pad = require('pad'),
    fs = require('fs');

var w = 10, h = 10;
var c = new Canvas(w, h);
var ctx = c.getContext('2d');

ctx.strokeStyle = '#C5CBCE';
ctx.lineWidth = 2;

for (var i = 0; i < 10; i++) {
    ctx.fillStyle = '#E2E2E2';
    ctx.fillRect(0, 0, 10, 10);
    ctx.beginPath();
    ctx.moveTo(i - 10, 0);
    ctx.lineTo(i, 10);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(i, 0);
    ctx.lineTo(i + 10, 10);
    ctx.stroke();
    fs.writeFileSync(pad(3, i, '0') + '.pre.png', c.toBuffer());
}