← 一覧へ

やってみよう「ダウンロード」を押すと、バーが伸びていきます

読み込み・待機メジャー（よく見る）

プログレスバー

Progress Bar

横棒がジワジワ伸びて、「あと何%で終わるか」がわかる。

別名進捗バープログレスインジケーター（確定）ローディングバー進行状況バー

どこで使われている？

よく見かける場所
ファイルのダウンロード・アップロード、インストール、アンケートの進み具合
使うとよい場面
終わるまでの割合がわかる処理
避けたい場面
時間が読めない処理（スピナーにする）

補足終わりがわかるときはプログレスバー、わからないときはスピナーを使うのが基本です。

似ているものとの違い

待ち時間の見せ方の違い（スピナー・プログレスバー・プログレスリング・スケルトンスクリーン）

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。

HTML / CSS / JavaScript で「プログレスバー（Progress Bar）」を実装してください。

動き：処理の進み具合を横長のバーで表示し、0%から100%まで左から右へ伸ばす。バーの近くに現在のパーセントを表示し、完了したら完了表示に切り替える。

使う部品：<progress> 要素（見た目は CSS で調整）
もっと詳しく：プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

Webサイトなら<progress> 要素（見た目は CSS で調整）
iPhoneアプリならProgressView(value:)
AndroidアプリならLinearProgressIndicator(progress = { })
FlutterならLinearProgressIndicator(value: )
React Nativeなら標準部品なし。自作 or react-native-progress

似ているもの・一緒に使うもの