Free Scroll Progress Bar Widget

<script src="https://hayneslab.dev/widgets/scroll-progress-bar.js" data-hl-height="5" async></script>
<!-- Free Scroll Progress Bar widget by haynes lab — https://hayneslab.dev/tools/widgets/scroll-progress-bar -->

<!-- Free Scroll Progress Bar widget by haynes lab — https://hayneslab.dev/tools/widgets/scroll-progress-bar -->
<script data-hl-height="5">
/*!
 * haynes lab — Scroll Progress Bar widget (free)
 * Docs & embed code: https://hayneslab.dev/tools/widgets/scroll-progress-bar
 */
(function () {
  'use strict';

  var PREFIX = 'hlw-scroll-progress-bar';
  var STYLE_ID = 'hlw-scroll-progress-bar-styles';

  function findScript() {
    return document.currentScript ||
      document.querySelector('script[src*="widgets/scroll-progress-bar.js"]');
  }

  function injectStyles() {
    if (document.getElementById(STYLE_ID)) return;
    var css =
      '.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
      '.' + PREFIX + ' { position: fixed; left: 0; right: 0; top: 0; z-index: 9999;' +
      ' height: var(--hlw-height); pointer-events: none;' +
      ' font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }' +
      '.' + PREFIX + '--bottom { top: auto; bottom: 0; }' +
      '.' + PREFIX + '--staged { position: absolute; z-index: 10; }' +
      '.' + PREFIX + '__fill { width: 0%; height: 100%; background: var(--hlw-color);' +
      ' transition: width 0.05s linear; }' +
      '.' + PREFIX + '__credit { position: absolute; right: 8px; top: calc(100% + 6px);' +
      ' pointer-events: auto; font-size: 11px; display: inline-flex; align-items: center; gap: 4px;' +
      ' color: #9ca3af; text-decoration: none; background: rgba(255, 255, 255, 0.85);' +
      ' padding: 2px 6px; border-radius: 6px; }' +
      '.' + PREFIX + '--bottom .' + PREFIX + '__credit { top: auto; bottom: calc(100% + 6px); }' +
      '.' + PREFIX + '__credit svg { display: block; }' +
      '.' + PREFIX + '__credit:hover { color: #6b7280; text-decoration: underline; }';
    var style = document.createElement('style');
    style.id = STYLE_ID;
    style.textContent = css;
    document.head.appendChild(style);
  }

  function el(tag, className, text) {
    var node = document.createElement(tag);
    if (className) node.className = className;
    if (text != null) node.textContent = text;
    return node;
  }

  function logoSvg() {
    var svgNS = 'http://www.w3.org/2000/svg';
    var svg = document.createElementNS(svgNS, 'svg');
    svg.setAttribute('viewBox', '0 0 32 32');
    svg.setAttribute('width', '13');
    svg.setAttribute('height', '13');
    svg.setAttribute('aria-hidden', 'true');
    svg.setAttribute('focusable', 'false');
    function circle(cx, cy, r, attrs) {
      var c = document.createElementNS(svgNS, 'circle');
      c.setAttribute('cx', cx);
      c.setAttribute('cy', cy);
      c.setAttribute('r', r);
      for (var key in attrs) c.setAttribute(key, attrs[key]);
      svg.appendChild(c);
    }
    circle(16, 16, 16, { fill: '#0f0a0a' });
    circle(16, 16, 12, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.3 });
    circle(16, 16, 9, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.5 });
    circle(16, 16, 6, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1.2, opacity: 0.9 });
    circle(16, 16, 3, { fill: '#06b6d4' });
    circle(24.5, 7.5, 2, { fill: '#f97316' });
    circle(7, 16, 1.8, { fill: '#f97316' });
    circle(20, 20, 1.5, { fill: '#f97316' });
    return svg;
  }

  function build(script) {
    var color = script.getAttribute('data-hl-color') || '#f97316';

    var height = parseInt(script.getAttribute('data-hl-height'), 10);
    if (isNaN(height) || height < 1) height = 4;
    if (height > 24) height = 24;

    var position = script.getAttribute('data-hl-position') || 'top';
    if (position !== 'top' && position !== 'bottom') {
      console.warn('[haynes lab scroll-progress-bar] data-hl-position must be "top" or "bottom". Using "top".');
      position = 'top';
    }

    // Demo stage on the landing page: scope the bar to the stage
    // (position: absolute) instead of taking over the real page.
    var stage = script.closest ? script.closest('.widget-demo__stage') : null;

    injectStyles();

    var classes = PREFIX;
    if (position === 'bottom') classes += ' ' + PREFIX + '--bottom';
    if (stage) classes += ' ' + PREFIX + '--staged';

    var root = el('div', classes);
    root.setAttribute('role', 'progressbar');
    root.setAttribute('aria-label', 'Reading progress');
    root.setAttribute('aria-valuemin', '0');
    root.setAttribute('aria-valuemax', '100');
    root.setAttribute('aria-valuenow', '0');
    root.style.setProperty('--hlw-color', color);
    root.style.setProperty('--hlw-height', height + 'px');

    var fill = el('div', PREFIX + '__fill');
    root.appendChild(fill);

    var credit = el('a', PREFIX + '__credit');
    credit.appendChild(logoSvg());
    credit.appendChild(document.createTextNode('Powered by haynes lab'));
    credit.href = 'https://hayneslab.dev/tools/widgets/scroll-progress-bar';
    credit.target = '_blank';
    credit.rel = 'noopener';
    root.appendChild(credit);

    var ticking = false;
    function update() {
      ticking = false;
      var doc = document.documentElement;
      var max = doc.scrollHeight - window.innerHeight;
      var pct = max > 0 ? Math.min(100, Math.max(0, (window.pageYOffset / max) * 100)) : 0;
      fill.style.width = pct + '%';
      root.setAttribute('aria-valuenow', String(Math.round(pct)));
    }
    function onScroll() {
      if (!ticking) {
        ticking = true;
        window.requestAnimationFrame(update);
      }
    }

    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);

    if (stage) {
      stage.appendChild(root);
    } else {
      document.body.appendChild(root);
    }
    update();
  }

  function init() {
    var script = findScript();
    if (!script) {
      console.warn('[haynes lab scroll-progress-bar] Could not locate its own script tag. Nothing rendered.');
      return;
    }
    build(script);
  }

  if (document.body) {
    init();
  } else {
    document.addEventListener('DOMContentLoaded', init);
  }
})();

</script>