<div class="spr-ring-wrap">
  <svg class="spr-ring" viewBox="0 0 64 64">
    <circle class="spr-track" cx="32" cy="32" r="27"></circle>
    <circle class="spr-fill" cx="32" cy="32" r="27"></circle>
  </svg>
  <span class="spr-pct" aria-hidden="true"></span>
</div>
<article class="spr-article">
  <h1>A Corner Progress Ring, No JavaScript Required</h1>
  <p>Scroll this page. The ring fixed in the top-right corner sweeps from 0% to 100% purely from CSS <code>animation-timeline: scroll(root)</code> driving <code>stroke-dashoffset</code> — there is no scroll event listener anywhere in this snippet.</p>
  <section><h2>01 · Why a ring instead of a bar</h2><p>A slim top-of-page bar is the most common scroll progress indicator, but a corner ring reads well as a persistent, low-profile companion that does not compete with a sticky header or nav for the same strip of real estate.</p></section>
  <section><h2>02 · The mechanism</h2><p>The circle's <code>stroke-dasharray</code> is set to its own circumference. A single <code>@keyframes</code> block animates <code>stroke-dashoffset</code> from the full circumference down to <code>0</code>. That keyframe animation is bound to <code>animation-timeline: scroll(root)</code>, so its 0%–100% progress is driven directly by how far the document has scrolled — not by time.</p></section>
  <section><h2>03 · Combine with a percentage label</h2><p>A small counter-style <code>::after</code> content trick or a second animation can drive the numeric label alongside the ring, so sighted users get both the visual sweep and an exact number.</p></section>
  <section><h2>04 · Browser support</h2><p>Chromium-based browsers (Chrome, Edge, Opera, Brave) support <code>animation-timeline: scroll()</code> today. Firefox and Safari support is still landing, so this snippet includes an <code>@supports</code> fallback that shows a static full ring rather than a broken or invisible one.</p></section>
  <section><h2>05 · Keep scrolling</h2><p>By the time this final section reaches the middle of the viewport, the ring above should read at or near 100% — entirely computed by the browser's compositor, off the main thread.</p></section>
</article>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0b0f19;color:#e6e9f2}

.spr-ring-wrap{position:fixed;top:20px;right:20px;width:56px;height:56px;z-index:10}
.spr-ring{width:100%;height:100%;transform:rotate(-90deg)}
.spr-track{fill:none;stroke:#1c2333;stroke-width:5}
.spr-fill{
  fill:none;stroke:#6366f1;stroke-width:5;stroke-linecap:round;
  stroke-dasharray:169.6;stroke-dashoffset:169.6;
  animation:spr-sweep linear both;
  animation-timeline:scroll(root);
}
@keyframes spr-sweep{ to{ stroke-dashoffset:0 } }
.spr-pct{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#a5adc7;
}
.spr-pct::after{
  content:"0%";
  animation:spr-count 100 linear both;
  animation-timeline:scroll(root);
}
@keyframes spr-count{
  0%{content:"0%"} 10%{content:"10%"} 20%{content:"20%"} 30%{content:"30%"}
  40%{content:"40%"} 50%{content:"50%"} 60%{content:"60%"} 70%{content:"70%"}
  80%{content:"80%"} 90%{content:"90%"} 100%{content:"100%"}
}

.spr-article{max-width:620px;margin:0 auto;padding:8vh 24px 40vh}
h1{font-size:clamp(26px,5vw,38px);letter-spacing:-.02em;margin-bottom:16px}
h2{font-size:18px;color:#c7cce0;margin-bottom:8px}
p{color:#9aa3c0;line-height:1.75;font-size:15px}
section{margin-top:12vh}
code{background:rgba(99,102,241,.16);color:#c7d2fe;padding:2px 6px;border-radius:5px;font-size:.9em;font-family:ui-monospace,Consolas,monospace}

@supports not (animation-timeline: scroll()){
  .spr-fill{stroke-dashoffset:0;animation:none}
  .spr-pct::after{content:"—";animation:none}
}

// The ring's sweep and the percentage label are both driven entirely by
// CSS animation-timeline: scroll(root) — this script only reports whether
// the browser supports the feature, it never touches scroll position.
const supportsScrollTimeline = typeof CSS !== 'undefined' && CSS.supports('animation-timeline: scroll()');
console.log('[native-scroll-progress-ring] animation-timeline: scroll() supported:', supportsScrollTimeline);
if (!supportsScrollTimeline) {
  document.querySelector('.spr-pct').textContent = 'N/A';
}