Loading & Progress

縦のバーがタイミングをずらして伸び縮みし、オーディオのイコライザーのように見えます。

[適用する場所]にバーローダー(Bar Loader (Equalizer))の読み込みアニメーションを追加してください。bars loader、オーディオバー(audio bars)とも呼ばれます。
数本の縦バーが、オーディオのイコライザーのように互いにタイミングをずらして伸び縮みするようにしてください。軽快で、でも一定のテンポで。
ループはつなぎ目なく続け、スクリーンリーダー向けに状態を示すラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きを止めてください。

画像の小さなぼかし版が先に場所を埋め、本来の画像が読み込まれるとくっきりします。

[適用する場所]にブラーアッププレースホルダー(Blur-Up Placeholder)の画像読み込み効果を追加してください。LQIP、ブラープレースホルダー(blur placeholder)とも呼ばれます。
画像の小さく強くぼかした版をすぐに画像の場所に表示し、本来の画像が読み込まれたら、なめらかにやや素早くくっきりさせてください。
画像の正確なサイズをあらかじめ確保して表示時に何もずれないようにし、ぼかしの端が枠からはみ出さないように切り取ってください。

並んだドットが順番に弾んだり、フェードしたり、拡大縮小したりします。

[適用する場所]にバウンシングドット(Bouncing Dots)を追加してください。ドットローダー(dots loader)、スリードットローダー(three-dot loader)とも呼ばれます。
ドットが軽く弾むリズムで一つずつ跳ねて着地し、少し間を置いてから繰り返すようにしてください。
ループはつなぎ目なく続け、スクリーンリーダー向けにステータスのラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きを止めてください。

処理の実行中、ボタンのラベルが小さなスピナーに置き換わるか、スピナーが追加されます。

[適用する場所]にボタンローディングステート(Button Loading State)を追加してください。スピナーボタン(spinner button)、ローディングボタン(loading button)とも呼ばれます。
押すとボタンが軽く沈み、ラベルがフェードアウトして代わりに小さなスピナーが処理中に表示され、終わったらラベルが戻るようにしてください。
読み込み中もボタンの幅は変えず、連続して押せないようにし、処理中であることをスクリーンリーダーに伝えてください。

リングや円弧が回り続け、読み込み中であることを示します。

[適用する場所]にサーキュラースピナー(Circular Spinner)を追加してください。スピナー(spinner)、スロバー(throbber)とも呼ばれます。
円弧が薄いリングに沿って一定の速さで回りながら伸び縮みし、なめらかに途切れず動くようにしてください。
回転はつなぎ目なく続け、スクリーンリーダー向けに読み込み中のラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は遅くするか止めてください。

タスクの進み具合に合わせて、バーが左から右へ満ちていきます。

[適用する場所]にプログレスバー(Determinate Progress Bar)を追加してください。プログレスバーフィル(progress bar fill)、プログレスインジケーター(progress indicator)とも呼ばれます。
バーは実際の進み具合に合わせて左から右へ満ちていき、更新のたびになめらかに動き、横にパーセンテージを表示してください。
現在値・最小値・最大値を持つ正しいプログレスバーのセマンティクスにしてスクリーンリーダーで読めるようにし、バーが逆戻りしないようにしてください。

所要時間がわからないとき、バーの一部がトラックの上を繰り返し流れます。

[適用する場所]に不確定プログレスバー(Indeterminate Linear Progress)を追加してください。インデターミネイトプログレスバー(indeterminate progress bar)とも呼ばれます。
タスクの長さがわからない間、短いバーがトラックの端から端へ素早くなめらかに何度も流れるようにしてください。
バーはトラックに完全に入ってから完全に出ていくようにしてループのつなぎ目を見せず、スクリーンリーダー向けに処理中のプログレスバーとしてマークしてください。

長い処理が進むにつれて、ステップの一覧が一つずつ強調されたりチェックされたりします。

[適用する場所]にマルチステップローダー(Multi-Step Loader)を追加してください。ステップローダー(step loader)、チェックリストローダー(checklist loader)とも呼ばれます。
ステップが上から下へ一つずつ点灯し、完了するたびに小さなチェックマークがポンと現れるようにしてください。落ち着いて読みやすいペースで。
ステップは固定タイマーではなく実際の処理の進み具合に合わせて進め、完了したステップをスクリーンリーダーに伝えてください。

円弧がリングに沿って伸び、完了した割合を示します。

[適用する場所]にプログレスリング(Progress Ring)を追加してください。サーキュラープログレス(circular progress)、ラジアルプログレス(radial progress)とも呼ばれます。
上端から円弧が時計回りにリングに沿って伸びて完了した割合を示し、止まるときはゆるやかに減速し、同時に中央の数字もカウントアップするようにしてください。
円弧と数字は同期させ、値は正しいプログレスバーのセマンティクスでスクリーンリーダーに伝えてください。

グレーのプレースホルダーブロックがゆっくり明滅し、読み込み中であることを示します。

[適用する場所]にパルスプレースホルダー(Pulse Placeholder)を追加してください。スケルトンパルス(skeleton pulse)とも呼ばれます。
これから表示されるコンテンツの形をしたグレーのブロックが、そろってゆっくり明るくなっては戻るようにしてください。穏やかで一定のリズムで。
プレースホルダーは実際のレイアウトに合わせてコンテンツが届いたときにずれないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。

グレーのプレースホルダーの上を、明るいハイライトが横切ります。

[適用する場所]にスケルトンシマー(Skeleton Shimmer)を追加してください。スケルトンウェーブ(skeleton wave)、シマーエフェクト(shimmer effect)とも呼ばれます。
やわらかな光の帯がグレーのプレースホルダーの上を左から右へ横切り、次の通過まで少し間を置くようにしてください。なめらかで、ゆったりと。
プレースホルダーの形は実際のレイアウトに合わせてコンテンツ読み込み時にずれないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止したプレースホルダーを表示してください。

ページ遷移中、画面上端の細いバーが少しずつ進み、読み込みが終わると端まで到達します。

[適用する場所]にトップローディングバー(Top Loading Bar)を追加してください。ページプログレスバー(page progress bar)とも呼ばれます。
上端の細いバーが、ページの読み込み中は最初に素早く進み、その後だんだんゆっくり進むようにし、読み込みが終わったら一気に端まで走ってフェードアウトさせてください。
読み込みが本当に終わるまでは端に届かないようにし、ページのコンテンツを覆ったりずらしたりしないようにしてください。

吹き出しの中の3つのドットが順に脈打つか浮き上がり、相手や AI が入力中であることを示します。

[適用する場所]にタイピングインジケーター(Typing Indicator)を追加してください。タイピングドット(typing dots)とも呼ばれます。
相手が入力している間、小さなチャットの吹き出しの中のドットが一つずつ浮き上がって明るくなるようにしてください。やわらかく穏やかなリズムで。
ループはつなぎ目なく続け、メッセージが届いたらすぐに吹き出しを消し、スクリーンリーダーにはドットの代わりに短いステータステキストを伝えてください。