やってみよう下のリンクを押すと、ページを移動するときの様子を再現します
読み込み・待機マイナー（知る人ぞ知る）
ページ上部の読み込みバー
Top Loading Bar / NProgress
ページを移動するとき、画面の一番上に細い色の線が左から伸びていき、読み込みが終わると消える。
別名トップローディングバーページ読み込みバーNProgress上の細いバー
どこで使われている？
- よく見かける場所
- YouTube、GitHub、ネットの記事サイト
- 使うとよい場面
- ページを移動するとき、読み込み中であることを控えめに伝えたいとき
- 避けたい場面
- すぐに表示される画面
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「ページ上部の読み込みバー（Top Loading Bar / NProgress）」を実装してください。 動き：ページ移動を始めたら、画面最上部に細い色のバーを出して左から伸ばし、読み込みが終わるまでは8割手前でゆっくりにする。終わったら端まで一気に伸ばしてフェードアウトする。 使う部品：NProgress ライブラリ
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | NProgress ライブラリ |
|---|---|
| iPhoneアプリなら | 一般的ではない（ナビゲーションバー上で自作） |
| Androidアプリなら | LinearProgressIndicator を上部に置く |
| Flutterなら | LinearProgressIndicator を上部に置く |
| React Nativeなら | 自作 |