Canvas Sine Wave Loader
Canvas上で正弦波が滑らかに流れるミニマルなローディング表示。
HTML
<canvas id="swl-canvas" width="200" height="80"></canvas>
JavaScript
const canvas = document.getElementById('swl-canvas');
const ctx = canvas.getContext('2d');
let t = 0;
function draw() {
ctx.clearRect(0, 0, 200, 80);
for (let wave = 0; wave < 3; wave++) {
ctx.beginPath();
ctx.strokeStyle = 'rgba(99,102,241,' + (0.3 + wave * 0.2) + ')';
ctx.lineWidth = 2;
for (let x = 0; x < 200; x++) {
const y = 40 + Math.sin((x * 0.03) + t + wave * 0.8) * (15 - wave * 3);
if (x === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
}
ctx.stroke();
}
t += 0.05;
requestAnimationFrame(draw);
}
draw();