Tired of the same old loader image? Then try James Padolsey‘s JavaScript loader called the Sonic Looping Loader.

Sonic is a tiny JS “class” utilizing the creation of custom loading animations. It is highly customizable style, and you can define the path using arc, bezier and line as functions.

Click on the image to view the demo.

Below is the code to make the basic square (four lines)

var square = new Sonic({

width: 100,

height: 100,

fillColor: '#000',

path: [

['line', 10, 10, 90, 10],

['line', 90, 10, 90, 90],

['line', 90, 90, 10, 90],

['line', 10, 90, 10, 10]

]

});

square.play();

document.body.appendChild(square.canvas);

Meanwhile, the fader draws interconnecting paths along the main path.

var circle = new Sonic({
    width: 50,
    height: 50,
    padding: 50,
    strokeColor: '#000',
    pointDistance: .01,
    stepsPerFrame: 3,
    trailLength: .7,
    step: 'fader',
    setup: function() {
        this._.lineWidth = 5;
    },
    path: [
        ['arc', 25, 25, 25, 0, 360]
    ]
});
circle.play();
document.body.appendChild(circle.canvas);

You can define your own step function aside from the ones indicate above (fader and square) since these two are quite limited. Try using arc or bezier or line and see what suits your taste.

Incoming search terms for the article:

• loader psd
• Sonic Looping Loader
• loader web
• square loader
• sonic looping loader js
• squares circle loader
• sonic loader css3
• web loader
• web design loader
• loader css3 square