やってみよう記事をスクロールして、上の細い線が伸びる様子を見てください
スクロールマイナー（知る人ぞ知る）
読了プログレスバー
Reading Progress Bar / Scroll Progress
記事を読み進めると、画面上部の細い線が少しずつ右へ伸びていく。
別名スクロールプログレスバー読書進捗バースクロールインジケーター進捗ライン
どこで使われている？
- よく見かける場所
- ブログ、ニュース記事、noteなどの長文記事
- 使うとよい場面
- 長い記事で、あとどれくらいで読み終わるかを伝えたいとき
- 避けたい場面
- 短い記事、一覧ページ
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「読了プログレスバー（Reading Progress Bar / Scroll Progress）」を実装してください。 動き：画面上部（ヘッダーのすぐ下）に細い横線を置き、記事のどこまで読んだかの割合に合わせて、左から右へ線を伸ばす。最後まで読むと線が端まで届く。 使う部品：スクロール量から割合を計算して幅を変える（CSS の animation-timeline: scroll() も使える）
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | スクロール量から割合を計算して幅を変える（CSS の animation-timeline: scroll() も使える） |
|---|---|
| iPhoneアプリなら | ScrollView の onScrollGeometryChange で割合を計算して自作 |
| Androidアプリなら | ScrollState から割合を計算して LinearProgressIndicator に渡す |
| Flutterなら | ScrollController から割合を計算して LinearProgressIndicator に渡す |
| React Nativeなら | onScroll で割合を計算して Animated で幅を変える |