Progress Bar

進捗バーは、エクスペリエンスでユーザーの進捗状況を視覚的に表すために使用される受動的指標です。

Progress bar

進捗バーの使用方法

進捗バーは、アクティビティ(コンテンツのロード、デバイス設定、メディア再生など)のステータスをユーザーに示す非対話型コンポーネントです。エクスペリエンスに合わせて、進捗状況を示す塗りつぶしの色を変更できます。

: メディア再生コントロールを有効にする場合は、Sliderコンポーネントを使用します。

進捗バーには次のコンポーネントが含まれます(番号はスクリーンショットの数字に対応しています)。

  1. 進捗状況の塗りつぶし
  2. 進捗状況バッファー(オプション)
  3. 進捗状況トラック

Progress bar component

進捗バーの種類

確定型

所要時間がわかっているアクティビティの進捗状況を表示するには、確定型の進捗バーを使用します。進捗バーには、タイムスタンプやそのほかの非対話型の期間インジケーターを表示しないでください。

Progress bar determinate

確定ロード型

コンテンツのロード中は、確定ロード型の進捗バーを使用します。

Progress bar determinate loading

確定型(円形)

円形の進捗バーは、Echo Spotにのみ使用します。円形の進捗バーは、確定型にも不確定型にも指定できます。

Progress bar determinate radial

不確定型

フラッシュブリーフィングやコンテンツのロードなど、アクティビティの長さを数値化できないときは、不確定型の進捗バーを使用します。このバーはアニメーションを使用して、状況が進行中であることを示します。

Progress bar indeterminate

不確定型(円形)

円形の進捗バーは、Echo Spotにのみ使用します。円形の進捗バーは、確定型にも不確定型にも指定できます。

Progress bar indeterminate radial

ベストプラクティス

スクリーンリーダーを使用するユーザーに進捗状況と合計時間を明示するため、アクセシビリティラベルを使用します。たとえば、「2分中の20秒」などです。

試してみる

APLドキュメントの作成と編集を参照してください。

開発者向けドキュメント