ProgressBar
ProgressBarウィジェットは、作業がどの程度進んだかを円形または棒の形で示す進行インジケーターです。
ダウンロード・読み込み・アップロードのように完了まで時間がかかる動作の状態を、ユーザーに視覚的に知らせるときに使用します。
定義・役割
ProgressBarウィジェットは、進行状態を円形（ドーナツ）または棒（ライン）の形で描画します。進行率（value）を0〜1の値で指定するとその割合だけ満たされ、指定しない場合は完了時点がわからない無限（不確定）アニメーションで動き続けます。進行部分の色と背景（トラック）の色、そして形ごとの細かな見た目を設定できます。
- カテゴリー: Contents
- デフォルトの形: Circular
- デフォルトの進行率: 未設定（無限アニメーション）
機能
| 機能 | 説明 |
|---|---|
| 進行表示の方式 | 円形または棒のいずれかの形で進行状態を表示します。 |
| 進行率の表示 | value（0〜1）を指定すると、その割合だけ満たされます。指定しない場合は、完了時点がわからない無限（不確定）アニメーションで表示されます。 |
| カラー設定 | 進行部分の色（color）とトラックの背景色（backgroundColor）をそれぞれ設定します。 |
| 形ごとの見た目調整 | 円形は線の太さなどを、棒は高さ・角丸を調整します。 |
| アクセシビリティ | スクリーンリーダーが読み上げるラベル・値を指定します。 |
使い方
- 左のウィジェットパレットでContentsカテゴリーを開きます。
- ProgressBar項目をキャンバスへドラッグ＆ドロップします。
- 右のプロパティパネルで形（
type）を円形・棒から選択します。 - 進行率を固定するには
valueに0〜1の値を指定します。（空のままにすると無限アニメーションで表示されます。） - 必要に応じて
color・backgroundColorで色を変更し、円形は線の太さを、棒は高さ・角丸を調整します。
プロパティ
| プロパティ | 説明 | デフォルト値 | 値 / タイプ |
|---|---|---|---|
type | 進行表示の形。円形は線の太さなど、棒は高さ・角丸のような形ごとの詳細設定を併せ持ちます。 | Circular | Circular / Linear |
value | 進行率。指定しない場合は無限（不確定）アニメーションで表示されます。 | 未設定 | 数値（0.0 〜 1.0） |
backgroundColor | トラック（背景）の色 | 未設定 | カラー |
color | 進行部分（満たされる部分）の色 | 未設定 | カラー |
semanticsLabel | スクリーンリーダー用のアクセシビリティラベル | 未設定 | 文字列 |
semanticsValue | スクリーンリーダー用のアクセシビリティ値 | 未設定 | 文字列 |
注意・ヒント
警告
valueを指定しない場合、完了時点がわからない無限（不確定）アニメーションで表示されます。進行率を目に見える形で満たすには0〜1の値を指定してください。この範囲を外れた値は自動的に0〜1へ補正されます。
ヒント
調整できる詳細な見た目は形によって異なります。円形は線の太さなどを、棒は高さと角丸を設定できます。
さらに詳しく
ヒント
このウィジェットをスクリプトで制御するWidget Control（Property・Method・Event）の全体はProgressBar Widget Controlでご確認ください。