Cara Membuat
Loading Canvas

Sonic menggunakan elemen HTML5 <canvas> / API. Ia bekerja dengan menggambar bentuk (secara default persegi 6px) pada interval kecil sepanjang jalur yang telah ditentukan. Anda dapat menentukan path dengan menggunakan fungsi: busur, bezier dan garis. Berikut kodenya:

Javascript

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);

Javascript™

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

Demo

Cara Membuat Loading Canvas

Cara Membuat *Loading Canvas*

Cara Membuat
Loading Canvas