reading-progress.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>scroll-anim-fallback — reading progress bar</title>

<script>
  (function () {
    var forced = new URLSearchParams(location.search).get('forceFallback') === '1';
    document.write('<link rel="stylesheet" href="dist/reading-progress' + (forced ? '.forced' : '') + '.css">');
  }());
</script>

<style>
  :root { color-scheme: light dark; --ink: #14161a; --paper: #fbfaf7; }
  @media (prefers-color-scheme: dark) { :root { --ink: #eceff4; --paper: #14161a; } }
  * { box-sizing: border-box; }
  body {
    margin: 0; padding: 0 1.5rem 8rem;
    background: var(--paper); color: var(--ink);
    font: 16px/1.6 system-ui, sans-serif;
  }
  .prose { max-width: 42rem; margin: 0 auto; padding-top: 4rem; }
  h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 0 0 .5rem; letter-spacing: -0.02em; }
  p { margin: 0 0 1rem; opacity: .8; }
  .badge {
    display: inline-block; font: 600 12px/1 ui-monospace, monospace;
    padding: .5em .75em; border-radius: 999px; border: 1px solid currentColor;
  }

  .reading-progress {
    position: fixed; inset: 0 0 auto; height: 5px; z-index: 10;
    background: color-mix(in srgb, var(--ink) 12%, transparent);
  }
  /* `transform-origin` lives here, not in the animated stylesheet: the plugin
     moves every declaration of the matched rule inside the @supports guard. */
  .reading-progress__bar {
    height: 100%;
    transform-origin: 0 50%;
    background: linear-gradient(90deg, #2b6cb0, #6b46c1);
  }
</style>
</head>
<body>

<div class="reading-progress"><div class="reading-progress__bar"></div></div>

<div class="prose">
  <h1>Reading progress bar</h1>
  <p>
    A <code>scroll(root block)</code> timeline. Native support maps the document
    scroller's full range onto the animation; the fallback computes the same
    thing from <code>scrollTop / (scrollHeight - clientHeight)</code>.
  </p>
  <p><span class="badge" id="status">detecting…</span></p>
  <p><a href="?forceFallback=1">Force the fallback path</a> &middot; <a href="./">Back to the demo index</a></p>
  <div id="filler"></div>
</div>

<script src="../packages/scroll-anim-fallback-runtime/dist/scroll-anim-fallback.umd.js"></script>
<script src="dist/reading-progress.manifest.js"></script>
<script>
  // Generate enough copy to scroll through.
  var filler = document.getElementById('filler');
  for (var i = 1; i <= 40; i++) {
    var p = document.createElement('p');
    p.textContent = 'Paragraph ' + i + '. Scroll-driven animations tie an animation’s ' +
      'progress to a scroll position rather than to elapsed time, which is why a ' +
      'time-based fallback has to be seeked rather than played.';
    filler.appendChild(p);
  }

  var forced = new URLSearchParams(location.search).get('forceFallback') === '1';
  var activated = ScrollAnimFallback.init({
    manifest: window.SAF_MANIFEST,
    reducedMotion: 'ignore', // a progress indicator is not decorative motion
    force: forced
  });
  document.getElementById('status').textContent = activated
    ? (forced ? 'fallback runtime (forced)' : 'fallback runtime')
    : 'native animation-timeline';
</script>

</body>
</html>