Heartbeat Pulse Monitor Loader — Free HTML CSS JS Snippet

<div class="hb-stage">
  <div class="hb-monitor" role="status" aria-label="Checking connection">
    <svg id="hbSvg" viewBox="0 0 400 120" preserveAspectRatio="none"></svg>
    <div class="hb-readout">
      <span class="hb-bpm" id="hbBpm">72</span>
      <span class="hb-bpm-unit">bpm</span>
    </div>
  </div>
  <p class="hb-hint" id="hbHint">Checking connection…</p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#050a08;color:#7ee9b0;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}

.hb-stage{display:flex;flex-direction:column;align-items:center;gap:14px}
.hb-monitor{position:relative;width:320px;height:120px;background:#03110c;border-radius:14px;border:1px solid rgba(74,222,128,.18);overflow:hidden;box-shadow:0 0 30px rgba(16,185,129,.1) inset}
#hbSvg{position:absolute;inset:0;width:100%;height:100%}

.hb-grid-line{stroke:rgba(74,222,128,.08);stroke-width:1}
.hb-trace{fill:none;stroke:#4ade80;stroke-width:2;filter:drop-shadow(0 0 5px rgba(74,222,128,.65))}
.hb-trace-dim{fill:none;stroke:rgba(74,222,128,.18);stroke-width:2}
.hb-scanhead{fill:#eafff2}

.hb-readout{position:absolute;top:10px;right:14px;text-align:right;font-variant-numeric:tabular-nums}
.hb-bpm{font-size:22px;font-weight:800;color:#4ade80}
.hb-bpm-unit{font-size:10px;color:#5fae86;margin-left:3px}

.hb-hint{font-size:12px;color:#5fae86;letter-spacing:.02em}

var svg = document.getElementById('hbSvg');
var bpmEl = document.getElementById('hbBpm');
var hint = document.getElementById('hbHint');
var NS = 'http://www.w3.org/2000/svg';

function el(tag, attrs) {
  var e = document.createElementNS(NS, tag);
  for (var k in attrs) e.setAttribute(k, attrs[k]);
  return e;
}

var W = 400, H = 120, MID = 60;

// Background grid, purely decorative
for (var gx = 0; gx <= W; gx += 40) svg.appendChild(el('line', { class: 'hb-grid-line', x1: gx, y1: 0, x2: gx, y2: H }));
for (var gy = 0; gy <= H; gy += 30) svg.appendChild(el('line', { class: 'hb-grid-line', x1: 0, y1: gy, x2: W, y2: gy }));

// One QRS-like heartbeat waveform "unit", expressed as an array of [xOffset, y]
// sample points across a fixed width. Repeating this unit end-to-end (with a
// flat baseline segment between beats) is what makes it read as a real ECG
// trace instead of an arbitrary wiggly line.
function beatUnit(unitWidth) {
  var pts = [];
  var flatLen = unitWidth * 0.62;
  var steps = 10;
  for (var i = 0; i <= steps; i++) pts.push([(i / steps) * flatLen, MID]);
  var spikeStartX = flatLen;
  var spike = [
    [spikeStartX + 2, MID],
    [spikeStartX + 6, MID + 6],   // small Q dip
    [spikeStartX + 12, MID - 46], // sharp R peak
    [spikeStartX + 18, MID + 18], // S dip below baseline
    [spikeStartX + 26, MID - 2],
    [spikeStartX + 34, MID - 14], // rounded T wave
    [spikeStartX + 46, MID],
  ];
  pts = pts.concat(spike);
  var tailLen = unitWidth - pts[pts.length - 1][0];
  var tailSteps = 6;
  for (var j = 1; j <= tailSteps; j++) {
    var x = pts[pts.length - 1][0] + (tailLen * (j / tailSteps));
    pts.push([x, MID]);
  }
  return pts;
}

var UNIT_W = 130;
var unit = beatUnit(UNIT_W);

function pathFromUnits(count, xOffset) {
  var d = '';
  for (var u = 0; u < count; u++) {
    unit.forEach(function (p, i) {
      var x = xOffset + u * UNIT_W + p[0];
      var y = p[1];
      d += (u === 0 && i === 0 ? 'M ' : 'L ') + x.toFixed(1) + ',' + y.toFixed(1) + ' ';
    });
  }
  return d;
}

// Two copies of the same repeating trace, offset so one scrolls out exactly
// as the other scrolls in — a seamless infinite loop with no visible seam or reset jump.
var dimTrace = el('path', { class: 'hb-trace-dim' });
var liveTrace = el('path', { class: 'hb-trace' });
var scanHead = el('circle', { class: 'hb-scanhead', r: 3 });
svg.appendChild(dimTrace);
svg.appendChild(liveTrace);
svg.appendChild(scanHead);

var BPM = 72;
var msPerBeat = 60000 / BPM;
var pxPerMs = UNIT_W / msPerBeat;
var totalUnits = Math.ceil(W / UNIT_W) + 2;

var start = null;
function tick(ts) {
  if (!start) start = ts;
  var elapsed = ts - start;
  var scrollX = (elapsed * pxPerMs) % UNIT_W;

  // The dim background trace shows the full repeating shape at rest, so the
  // "live" sweeping portion has visual context even where it hasn't drawn yet.
  dimTrace.setAttribute('d', pathFromUnits(totalUnits, -scrollX));

  // The live trace is clipped to only the portion left of a moving "scan
  // head" x-position, which sweeps left-to-right and wraps — mimicking a
  // real ECG monitor where the newest sample overwrites the oldest.
  var headX = (elapsed * pxPerMs) % W;
  liveTrace.setAttribute('d', pathFromUnits(totalUnits, -scrollX));
  liveTrace.setAttribute('clip-path', 'none');
  var clipId = 'hbclip';
  var existing = document.getElementById(clipId);
  if (!existing) {
    var defs = el('defs', {});
    var clip = el('clipPath', { id: clipId });
    clip.appendChild(el('rect', { id: 'hbClipRect', x: 0, y: 0, width: headX, height: H }));
    defs.appendChild(clip);
    svg.insertBefore(defs, svg.firstChild);
    liveTrace.setAttribute('clip-path', 'url(#' + clipId + ')');
  } else {
    document.getElementById('hbClipRect').setAttribute('width', headX);
  }

  scanHead.setAttribute('cx', headX);
  var idxFloat = ((headX - (-scrollX)) % UNIT_W + UNIT_W) % UNIT_W;
  var nearestPt = unit.reduce(function (best, p) {
    return Math.abs(p[0] - idxFloat) < Math.abs(best[0] - idxFloat) ? p : best;
  }, unit[0]);
  scanHead.setAttribute('cy', nearestPt[1]);

  requestAnimationFrame(tick);
}
requestAnimationFrame(tick);

// Subtle bpm jitter so the readout feels alive rather than a frozen number.
setInterval(function () {
  var jitter = Math.round((Math.random() - 0.5) * 3);
  bpmEl.textContent = String(BPM + jitter);
}, 1400);

var messages = ['Checking connection\u2026', 'Waiting for server\u2026', 'Verifying session\u2026'];
var mi = 0;
setInterval(function () {
  mi = (mi + 1) % messages.length;
  hint.textContent = messages[mi];
}, 3200);