ローディング
Canvas

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