Reading progress: a bar that fills as you scroll

<article class="ma-scroll-progress-article">
  <div class="ma-scroll-progress-bar" aria-hidden="true"></div>
  <header class="ma-scroll-progress-head">
    <p class="ma-scroll-progress-kicker">Field notes · 4 min read</p>
    <h2>How Pellbrook keeps one shopping list for a whole house</h2>
    <p class="ma-scroll-progress-lede">Four flatmates, two supermarkets and one list that never forgets the oat milk.</p>
  </header>
  <section>
    <h3>One list, many hands</h3>
    <p>Everyone in the house adds to the same list from their own phone. An item added at the bus stop shows up on the kitchen tablet a moment later, with a small initial beside it so nobody buys the same loaf twice. There is no account to set up for guests: a visitor scans the card on the fridge and can add things for the weekend.</p>
  </section>
  <section>
    <h3>Aisles, not alphabet</h3>
    <p>Pellbrook sorts the list by where things sit in the shop you pick. Walk in through the fruit and vegetables and the list starts there, then moves past the bakery to the fridges at the back. Each shop learns its own order from the way you tick things off, so the second visit is already quicker than the first.</p>
  </section>
  <section>
    <h3>Quiet reminders</h3>
    <p>When someone passes a shop on the list, Pellbrook can send one gentle nudge with the three things still missing. It never sends more than one an hour, and it stays silent at night. If nobody needs anything, it says nothing at all, which turns out to be the feature people like most.</p>
  </section>
  <section>
    <h3>Receipts that split themselves</h3>
    <p>Tick an item as bought and it moves to a shared tab with its price. At the end of the month Pellbrook shows who paid for what and suggests the fewest transfers to even things out. The list stays light because finished items fold away, and the history is there when you need it.</p>
  </section>
  <p class="ma-scroll-progress-end">End of article</p>
</article>

/* Reading progress: a thin bar sticks to the top of the article and fills from left to right as
   the reader scrolls. The fill follows the nearest scroller (scroll(nearest block)): inside the
   gallery frame that is the frame, on a real page it is the page. The bar is hidden by default
   and only shows where scroll timelines run, so a browser without them, reduced motion and pause
   show the article with no bar rather than a full one that means nothing. */
.ma-scroll-progress {
  background: #F6F4EF;
  color: #1F2A44;
}

.ma-scroll-progress .ma-scroll-progress-article {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 1.25rem 2.5rem;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
}

.ma-scroll-progress .ma-scroll-progress-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 0.35rem;
  margin: 0 -1.25rem;
  border-radius: 0 0 0.2rem 0.2rem;
  background: linear-gradient(90deg, #7FB6FF, #6FD6B4);
  transform-origin: left center;
  opacity: 0;
}

.ma-scroll-progress .ma-scroll-progress-head {
  padding: 2rem 0 0.5rem;
  border-bottom: 2px solid #FFC861;
  margin-bottom: 0.5rem;
}

.ma-scroll-progress .ma-scroll-progress-kicker {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5B6B8C;
}

.ma-scroll-progress h2,
.ma-scroll-progress h3 {
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.2;
  color: #1F2A44;
}

.ma-scroll-progress h2 {
  margin: 0 0 0.75rem;
  font-size: 1.75rem;
}

.ma-scroll-progress h3 {
  margin: 1.75rem 0 0.4rem;
  font-size: 1.25rem;
}

.ma-scroll-progress p {
  margin: 0 0 1rem;
}

.ma-scroll-progress .ma-scroll-progress-lede {
  font-size: 1.1rem;
  color: #5B6B8C;
}

.ma-scroll-progress .ma-scroll-progress-end {
  margin-top: 2rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: #5B6B8C;
}

/* The bar keeps opacity 1 on every frame, so it shows only while the timeline drives it. */
@keyframes ma-scroll-progress-fill {
  from { transform: scaleX(0); opacity: 1; }
  to { transform: scaleX(1); opacity: 1; }
}

@supports (animation-timeline: scroll()) {
  .ma-scroll-progress .ma-scroll-progress-bar {
    animation-name: ma-scroll-progress-fill;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(nearest block);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ma-scroll-progress,
  .ma-scroll-progress * {
    animation: none !important;
  }
}