Scroll Progress
スクロールプログレス
どんな動き？
ページ上端などに固定した細いバーが、スクロール量に比例して0%から100%まで伸びていくアニメーション。今どのくらい読み進めたかが一目でわかるため、ブログ記事やドキュメントなど縦に長いコンテンツで使われる定番のUIパーツ。CSS Scroll-driven Animationsを使えばJavaScriptなしでも実装できるようになった。
よく使う場所
ブログ記事長文コンテンツドキュメントページ
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Grow a fixed bar at the top of the page in direct proportion to how far the user has scrolled.Trigger:
Scroll position across the entire document.
Start:
0% scroll progress — bar width: 0%.
End:
100% scroll progress (bottom of page reached) — bar width: 100%.
Behavior:
The bar's width tracks total scroll progress 1:1, growing as the user scrolls down and shrinking back if they scroll up, with no easing lag.
Initial state:
transform: scaleX(0), transform-origin: left
Final state:
transform: scaleX(1)実装方法の候補
この動きは以下の技術で実装できます。
CSS Scroll-driven AnimationsJavaScriptGSAP
別名・関連ワード
Reading Progress BarScroll IndicatorProgress Indicator