読了プログレス

<%# reading-progress: the article publishes its progress as a CSS custom property
    on itself AND on :root; the bar here consumes it with pure CSS (no consumer
    JS). Scroll the page to move the bar. %>
<div class="reading-progress-demo">
  <p class="reading-progress-demo__hint"><%= t("components.reading_progress.demo.hint") %></p>
  <div class="reading-progress-demo__bar" aria-hidden="true"></div>
  <article class="reading-progress-demo__article" data-controller="stimeo--reading-progress">
    <% 28.times do |i| %>
      <p><%= t("components.reading_progress.demo.paragraph", index: i + 1) %></p>
    <% end %>
  </article>
</div>

/*
 * Presentation-only styles for the reading-progress demo. The library maintains
 * --stimeo--reading-progress (0..1); the bar's width is pure CSS from that
 * variable. The bar is sticky so it stays visible while the article scrolls.
 */

.reading-progress-demo__hint {
  margin: 0 0 0.75rem;
  color: var(--muted);
}

.reading-progress-demo__bar {
  position: sticky;
  /* Clear the site header: pinned at 0 the bar sits behind it, so the reader sees
     nothing move even though the progress value is changing. */
  top: var(--header-h, 3.5rem);
  z-index: 31;
  height: 0.375rem;
  border-radius: 0.25rem;
  background: var(--border);
  overflow: hidden;
}

.reading-progress-demo__bar::before {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--stimeo--reading-progress, 0) * 100%);
  background: var(--accent);
}

/*
 * The article must be decisively taller than the viewport: progress is
 * -top / (height - viewportHeight), so an article shorter than the viewport is
 * binary (0 -> 1) by contract and the bar never fills gradually. Real text plus
 * a vh floor keeps the demo progressive on any screen size.
 *
 * The floor also has to be tall enough to dominate the page it sits on: with only
 * a little more than one viewport of slack, the bar reads 0 through the page header
 * and is already full long before the footer, which looks broken rather than
 * gradual. The paragraphs carry the article past two viewports on their own.
 *
 * The paragraph count is what actually fills those three viewports — the floor is a
 * safety net for very tall screens, not the thing holding the article open. Too few
 * paragraphs and the article ends in a wide blank band that reads as a rendering
 * fault rather than as an article.
 */
.reading-progress-demo__article {
  margin-top: 0.75rem;
  min-height: 200vh;
}

.reading-progress-demo__article p {
  margin: 0 0 1.5rem;
  color: var(--fg);
}