スクロール量を示すバー（CSS のみ）
JavaScript なし・CSS の animation-timeline: scroll() だけでページのスクロール進捗を可視化するバーを実装。Intersection Observer 不要。
解説
スクロール量を示すバー（CSS のみ）は、アニメーションカテゴリの「scroll-driven」に分類される実装パターンです。CSS のみで構成され、難易度は中級レベル。
2024 年に Chrome / Edge で正式サポートされた Scroll-driven Animations を使った実装です。これまで JavaScript の Intersection Observer や scroll イベントで取得していた「現在のスクロール位置」を、CSS だけで取得・アニメーションに紐付けられるようになりました。
このサンプルでは、ページ上部に固定したバーを animation-timeline: scroll(); で「スクロール量 0% → 100%」に同期させ、長文記事でも読者の現在地が一目で分かるようにしています。
仕組み
下記コードタブから HTML / CSS をそれぞれ確認・コピーできます。プレビュー領域では実際の動作をその場で確認可能です。
CSS プロパティだけで完結しているため、フレームワーク非依存・軽量に組み込めます。React / Vue / Astro / 静的 HTML どれにも持ち込み可能です。
注意点 / カスタマイズ時のポイント
2026 年現在、Chrome / Edge / Opera で対応済み。Safari / Firefox はまだ未対応（Safari は議論中）なので、フォールバックとして JS 実装を併用するか、対応ブラウザのみの enhancement として使うのが現実的です。
パフォーマンスは非常に良好で、メインスレッドを占有せずコンポジターで動作します。scroll イベントリスナーより圧倒的に軽量。
よくある質問
Safari でも動くようにしたいです
@supports (animation-timeline: scroll()) で分岐できます。縦スクロールではなく横スクロールにも使えますか？
animation-timeline: scroll(inline) を指定すると水平方向のスクロール量に同期します。このスニペットは商用利用できますか？
そのまま貼り付ければ動きますか？
ブラウザ対応は？
Tailwind CSS でも実装できますか？
@apply や arbitrary values が必要な場合があります。