CSS scroll-timeline-name Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* 1. Define the Scroll Container */
.scroll-container {
  height: 400px;
  overflow-y: scroll;
  border: 2px solid #333;
  position: relative;
  
  /* Create the timeline name here */
  scroll-timeline-name: --my-scroll-timeline;
  /* Define the axis (vertical) */
  scroll-timeline-axis: block;
}

/* 2. The element that will animate */
.progress-bar {
  position: sticky;
  top: 0;
  left: 0;
  height: 10px;
  background-color: #007bff;
  width: 0%; /* Start at 0 */
  
  /* Link the animation to the named timeline */
  animation: grow-progress auto linear;
  animation-timeline: --my-scroll-timeline;
}

/* 3. The Animation */
@keyframes grow-progress {
  from { width: 0%; }
  to { width: 100%; }
}

/* Visual styling for the demo */
.content {
  padding: 20px;
}
.spacer {
  height: 600px; /* Makes the container scrollable */
  background: linear-gradient(transparent, #f0f0f0);
}</style></head><body><div class="scroll-container">
  <div class="progress-bar"></div>
  <div class="content">
    <h1>Scroll Down</h1>
    <p>The bar at the top will grow as you move through this text.</p>
    <div class="spacer"></div>
    <p>Keep going...</p>
    <div class="spacer"></div>
    <p>You've reached the end!</p>
  </div>
</div></body></html>