Indeterminate Linear Progress (不確定プログレスバー)
別名 Indeterminate progress bar, Buffer bar
所要時間がわからないとき、バーの一部がトラックの上を繰り返し流れます。
使いどころ
ページ上部やカードの読み込み
バリエーション
- indeterminate
- query
- buffer
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]に不確定プログレスバー(Indeterminate Linear Progress)を追加してください。インデターミネイトプログレスバー(indeterminate progress bar)とも呼ばれます。
タスクの長さがわからない間、短いバーがトラックの端から端へ素早くなめらかに何度も流れるようにしてください。
バーはトラックに完全に入ってから完全に出ていくようにしてループのつなぎ目を見せず、スクリーンリーダー向けに処理中のプログレスバーとしてマークしてください。似ているモーション
Determinate Progress Bar (プログレスバー)
別名 Progress bar fill, Progress Indicator, Progress bar, Circular progress
タスクの進み具合に合わせて、バーが左から右へ満ちていきます。
使いどころ
アップロード、複数ステップのフォーム
[適用する場所]にプログレスバー(Determinate Progress Bar)を追加してください。プログレスバーフィル(progress bar fill)、プログレスインジケーター(progress indicator)とも呼ばれます。
バーは実際の進み具合に合わせて左から右へ満ちていき、更新のたびになめらかに動き、横にパーセンテージを表示してください。
現在値・最小値・最大値を持つ正しいプログレスバーのセマンティクスにしてスクリーンリーダーで読めるようにし、バーが逆戻りしないようにしてください。Top Loading Bar (トップローディングバー)
別名 Page progress bar, NProgress
ページ遷移中、画面上端の細いバーが少しずつ進み、読み込みが終わると端まで到達します。
使いどころ
SPA のルート読み込み
[適用する場所]にトップローディングバー(Top Loading Bar)を追加してください。ページプログレスバー(page progress bar)とも呼ばれます。
上端の細いバーが、ページの読み込み中は最初に素早く進み、その後だんだんゆっくり進むようにし、読み込みが終わったら一気に端まで走ってフェードアウトさせてください。
読み込みが本当に終わるまでは端に届かないようにし、ページのコンテンツを覆ったりずらしたりしないようにしてください。Skeleton Shimmer (スケルトンシマー)
別名 Skeleton wave, Shimmer effect, placeholder-wave
グレーのプレースホルダーの上を、明るいハイライトが横切ります。
使いどころ
コンテンツ読み込み中のプレースホルダー
[適用する場所]にスケルトンシマー(Skeleton Shimmer)を追加してください。スケルトンウェーブ(skeleton wave)、シマーエフェクト(shimmer effect)とも呼ばれます。
やわらかな光の帯がグレーのプレースホルダーの上を左から右へ横切り、次の通過まで少し間を置くようにしてください。なめらかで、ゆったりと。
プレースホルダーの形は実際のレイアウトに合わせてコンテンツ読み込み時にずれないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止したプレースホルダーを表示してください。Loading & Progressのほかのモーション
Multi-Step Loader (マルチステップローダー)
別名 Step loader, Checklist loader
長い処理が進むにつれて、ステップの一覧が一つずつ強調されたりチェックされたりします。
使いどころ
AI による生成、オンボーディング中の処理
[適用する場所]にマルチステップローダー(Multi-Step Loader)を追加してください。ステップローダー(step loader)、チェックリストローダー(checklist loader)とも呼ばれます。
ステップが上から下へ一つずつ点灯し、完了するたびに小さなチェックマークがポンと現れるようにしてください。落ち着いて読みやすいペースで。
ステップは固定タイマーではなく実際の処理の進み具合に合わせて進め、完了したステップをスクリーンリーダーに伝えてください。Progress Ring (プログレスリング)
別名 Circular progress, Radial progress, Animated Circular Progress Bar
円弧がリングに沿って伸び、完了した割合を示します。
使いどころ
アップロード、目標、タイマー
[適用する場所]にプログレスリング(Progress Ring)を追加してください。サーキュラープログレス(circular progress)、ラジアルプログレス(radial progress)とも呼ばれます。
上端から円弧が時計回りにリングに沿って伸びて完了した割合を示し、止まるときはゆるやかに減速し、同時に中央の数字もカウントアップするようにしてください。
円弧と数字は同期させ、値は正しいプログレスバーのセマンティクスでスクリーンリーダーに伝えてください。Pulse Placeholder (パルスプレースホルダー)
別名 Skeleton pulse, placeholder-glow
グレーのプレースホルダーブロックがゆっくり明滅し、読み込み中であることを示します。
使いどころ
スケルトンスクリーン
[適用する場所]にパルスプレースホルダー(Pulse Placeholder)を追加してください。スケルトンパルス(skeleton pulse)とも呼ばれます。
これから表示されるコンテンツの形をしたグレーのブロックが、そろってゆっくり明るくなっては戻るようにしてください。穏やかで一定のリズムで。
プレースホルダーは実際のレイアウトに合わせてコンテンツが届いたときにずれないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。