ProgressBar

オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、最新のリリースノートを参照してください。

ProgressBarコンポーネントは、進行中のアクティビティを示す進行状況バーを表示します。進行状況の値が定義されていない場合、進行状況バーには不確定型のインジケーターが表示されます。

使用方法

インポート

クリップボードにコピーしました。

import { ProgressBar } from '@amazon-devices/kepler-ui-components';

例

クリップボードにコピーしました。

<ProgressBar
    progress={50}
    size={"xl"}
/>

プロパティ

プロパティ	型	デフォルト値	必須	説明
`progress`	数値	なし	×	進行状況の割合（%）を表す0～100の数値。未定義の場合、不確定の進行状況インジケーターが表示されます。
`animationDuration`	数値	確定の場合は250ミリ秒、不確定の場合は1000ミリ秒	×	進行状況アニメーションの長さ（ミリ秒）。
`indicatorColor`	ColorValue	テーマにより決定	×	進行状況インジケーターの色。
`trackColor`	ColorValue	テーマにより決定	×	進行状況トラック（コンテナ）の色。
`size`	`SizeVariantAll`	`"md"`	×	進行状況バーのサイズ。`'xs'`、`'sm'`、`'md'`、`'lg'`、`'xl'`、`'xxl'`がサポートされています。
`barStyle`	ViewStyle	テーマにより決定	×	バー（トラックまたはコンテナとも呼ばれます）のスタイルオーバーライド。
`indicatorStyle`	ViewStyle	テーマにより決定	×	インジケーターのスタイルオーバーライド。

カスタマイズ

progress、animationDuration、indicatorColor、trackColor、size、barStyle、indicatorStyle、rtlの各プロパティを使用して、進行状況バーをカスタマイズできます。

テーマがサポートされ、現時点では、コンポーネントのborderRadius、height、width、backgroundColorの各スタイルに適用されます。

対話操作

モダリティ	利用可能
D-Pad	×
タッチ	×
音声	×

アクセシビリティ

プロパティ	利用可能
`accessible`	○
`accessibilityRole`	○
`accessibilityLabel`	○
`accessibilityValue`	○
`accessibilityActions`	×
`accessibilityState`	×

UIエクスペリエンス

確定型

次のビデオは、確定型の進行状況バーのデモを示しています。

不確定型

次のビデオは、不確定型の進行状況バーのデモを示しています。

切り替え

次のビデオでは、不確定型と確定型のインジケーターを実行時に動的に切り替えます。

Last updated: 2026年6月23日