滚动驱动动画-阅读时间进度

<style>
  @supports (animation-timeline: scroll()) {
    .scroll-progress {
      display: fixed;
      top: 0;
      left: 0;
      height: 4px;
      width: 100%;
      z-index: 10;
      animation: grow-progress auto linear;
      transform-origin: 0 50%;
      animation-timeline: scroll(root);
    }

    @keyframes grow-progress {
      from {
        transform: scaleX(0);
      }
      to {
        transform: scaleX(1);
      }
    }
  }

  @supports not (animation-timeline: scroll()) {
    .scroll-progress {
      display: none;
    }
  }
</style>

<div className="scroll-progress"></div>