CSSのみでスクロールした際に進捗率のプログレスバーを実装する方法-デモ画面

CSS

<style>
.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  background-color: #3f434f;
  transform-origin: 0 0;
  animation-name: progress;
  animation-timing-function: linear;
  animation-timeline: scroll(root);
}
@keyframes progress {
  0% {
    scale: 0 1 1;
  }
  100% {
    scale: 1 1 1;
  }
}
</style>

HTML

<div class="progress"></div>

これだけでスクロールした際にプログレスバーが表示されます。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト