CSS Scroll Spy Indicator

<div class="scroll-area">
  <div class="scroll-header">
    <span class="scroll-label">Reading Progress</span>
    <div class="bar-track"><div class="bar-local"></div></div>
  </div>
  <div class="scroll-content">
    <h3>Check the frame and tires</h3>
    <p>Start with a visual inspection of the frame. Look for cracks, rust spots, or paint chips that expose bare metal. Check the welds where tubes meet. Run your hand along each seam. Small surface rust can be sanded and touched up with paint. Deep corrosion or cracks mean a trip to a bike shop. Frame damage is not something you fix at home.</p>
    <p>Move to the tires next. Spin each wheel and watch for wobbles or hops. A wheel that moves side to side needs truing. Check the tire sidewalls for dry rot, which shows up as small cracks in the rubber. Press your thumb into the tread to feel for soft spots or cuts. Inflate both tires to the pressure range printed on the sidewall. Under-inflated tires make pedaling harder and wear out faster.</p>
    <p>While the wheels spin, listen for grinding or clicking. Those sounds usually mean the bearings need attention. A bearing service takes special tools, so most riders bring that work to a shop. Check that the quick-release levers close firmly, with the lever pointing back along the fork or frame. An open lever is an easy way to lose a wheel.</p>
    <h3>Clean and lubricate the drivetrain</h3>
    <p>Wipe down the chain with a rag. Shift through every gear to expose the full length. A chain that looks black or gritty needs degreaser. Spray or brush the degreaser on, let it sit for a minute, then scrub with an old toothbrush. Rinse with water and dry the chain completely.</p>
    <p>Apply chain lube one drop at a time on the top run of the chain, turning the pedals backward to work it in. Wipe off the excess with a clean rag. Too much lube attracts dirt. The chain only needs oil between the rollers, not coating the outside. A properly lubed chain runs quietly and shifts smoothly.</p>
    <p>Check the derailleur cables while you are at it. Frayed cables snap when you shift under load. Shift into the smallest cog on the back wheel and inspect where the cable enters the derailleur. Look for broken strands sticking out from the cable housing. Replace any cable with visible damage.</p>
    <h3>Test the brakes and adjust the seat</h3>
    <p>Squeeze each brake lever hard and hold it while you try to push the bike forward. The wheel should lock completely. Inspect the pads for grooves or uneven wear. Pads worn down to the indicator line need replacing before your first ride.</p>
    <p>Finish with the saddle height. Stand next to the bike and raise the seat until the top is level with your hip bone. Sit on the bike and put your heel on the pedal at its lowest point. Your leg should be straight. A seat that is too low makes your knees hurt on long rides. Once the height feels right, tighten the seat post clamp and give the saddle a twist to confirm it will not move.</p>
  </div>
</div>

/* The bar is a sibling of the scroller, not a descendant, so
   scroll(nearest) would look past it and find the page instead.
   A named timeline published with timeline-scope fixes that:
   the scroller names it, the ancestor scopes it, the bar reads it. */
.scroll-area {
  timeline-scope: --spy;
  width: 100%;
  border: 1px solid #2a2a2d;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.scroll-content {
  scroll-timeline-name: --spy;
  padding: 1.25rem 1.25rem 2rem;
  height: 280px;
  overflow-y: auto;
}

.bar-local {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #b8ff57, #57d9a3);
  border-radius: 999px;
  animation: reading-progress linear;
  animation-timeline: --spy;
  animation-fill-mode: both;
}

@keyframes reading-progress {
  from { width: 0%; }
  to   { width: 100%; }
}

.scroll-header {
  position: sticky;
  top: 0;
  background: #141415;
  border-bottom: 1px solid #2a2a2d;
  padding: .6rem 1rem .5rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  z-index: 2;
}

.scroll-label {
  font-size: .7rem;
  font-family: "DM Mono", "Fira Code", Consolas, monospace;
  color: #88888f;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.bar-track {
  height: 6px;
  background: #1c1c1e;
  border-radius: 999px;
  overflow: hidden;
}

.scroll-content p {
  margin: 0 0 .85rem;
  font-size: .875rem;
  color: #88888f;
  line-height: 1.7;
}

<div class="inbar-frame">
  <div class="inbar-bar"></div>
  <div class="inbar-body"> ...article... </div>
</div>

.inbar-frame {
  height: 280px;
  overflow-y: auto;
}

/* first child of the scroller, pinned to its top edge */
.inbar-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 3px;
  background: #b8ff57;
  transform: scaleX(0);
  transform-origin: left center;
}

@supports (animation-timeline: scroll()) {
  .inbar-bar {
    animation: inbar-fill linear both;
    /* one step up the tree finds .inbar-frame */
    animation-timeline: scroll();
  }
}

@keyframes inbar-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

<div class="spy-wrap">
  <nav class="spy-rail" aria-hidden="true">
    <span class="spy-item spy-i1">Intro</span>
    <span class="spy-item spy-i2">Install</span>
    <span class="spy-item spy-i3">Usage</span>
    <span class="spy-item spy-i4">API</span>
  </nav>
  <div class="spy-doc">
    <h4>Intro</h4>
    <p>Scroll this column. The rail on the left lights the entry whose range the scroll is currently inside.</p>
    <p>Nothing observes the sections. Each rail entry owns a quarter of the timeline.</p>
    <h4>Install</h4>
    <p>The ranges are percentages of the scroll length, so they stretch and shrink with the content.</p>
    <p>Pixel ranges would be wrong here, because the sections are not a fixed distance apart.</p>
    <h4>Usage</h4>
    <p>Because no fill mode is set, an entry applies its styles only inside its own range.</p>
    <p>Add <code>both</code> and every entry would stay lit once its range had been passed.</p>
    <p>Percentages also mean the ranges stay correct when the content grows, which pixel values would not.</p>
    <h4>API</h4>
    <p>The last entry is the exception: it carries <code>forwards</code> as well, because an unfilled animation has stopped applying by the time the scroll reaches the very end of its range.</p>
    <p>Without that one word the rail goes dark the moment the reader hits the bottom, which looks like a fault rather than a boundary condition.</p>
    <p>Four entries is comfortable. Past about six the ranges get too narrow to read as anything but a flicker.</p>
  </div>
</div>

/* the rail is a sibling of the scroller, so the
   timeline has to be named and scoped */
.spy-wrap {
  timeline-scope: --spy-rail;
  display: grid;
  grid-template-columns: 110px 1fr;
}

.spy-doc {
  scroll-timeline-name: --spy-rail;
  height: 280px;
  overflow-y: auto;
}

@supports (animation-timeline: scroll()) {
  .spy-item {
    /* no fill mode: the styles apply only while the
       scroll is inside this item's own range */
    animation: spy-on linear;
    animation-timeline: --spy-rail;
  }

  .spy-i1 { animation-range: 0%  25%; }
  .spy-i2 { animation-range: 25% 50%; }
  .spy-i3 { animation-range: 50% 75%; }

  /* at exactly the end of a range an unfilled animation
     has already stopped applying, so the last entry
     needs forwards or the rail goes dark at the bottom */
  .spy-i4 {
    animation-range: 75% 100%;
    animation-fill-mode: forwards;
  }
}

/* both stops the same, so the state is flat across the range */
@keyframes spy-on {
  from, to {
    background: #b8ff57;
    color: #0c0c0d;
  }
}