Preloader Animation

by Andrew Poes

HTML

<canvas id="artboard" width=64 height=64></canvas>

CSS

canvas {
    background: black;
}

JavaScript

function update() {
    var canvas = document.getElementById('artboard');
    var context = canvas.getContext('2d');
    
    var radius = 4;
    var center = { x: 32, y: 32 };
    
    context.clearRect(0,0,64,64);    
    context.fillStyle = "white";
    
    var len = center.x - radius * 2;
    for (var i = 0; i < 6; ++i) {
        var time = Date.now() * 0.002 - i * 0.2;
        var x = Math.sin(time);
        var y = Math.cos(time) * 4;
        var t = Math.atan(y/x) * 2 + i * 0.25 - 0.6;
        var p = { x: center.x + Math.sin(t) * len, y: center.y + Math.cos(t) * len };
        
        context.beginPath();
        context.arc(p.x,p.y,4,0,2*Math.PI);
        context.fill();
    }
    
    window.requestAnimationFrame(function() {
        update();
    });
}

update();