Bouncing Dots (バウンシングドット)
別名 Dots loader, Ellipsis loader, Three-dot loader
並んだドットが順番に弾んだり、フェードしたり、拡大縮小したりします。
使いどころ
インラインの読み込み、チャットの待ち時間
バリエーション
- bounce
- pulse
- wave
- fade sequence
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にバウンシングドット(Bouncing Dots)を追加してください。ドットローダー(dots loader)、スリードットローダー(three-dot loader)とも呼ばれます。
ドットが軽く弾むリズムで一つずつ跳ねて着地し、少し間を置いてから繰り返すようにしてください。
ループはつなぎ目なく続け、スクリーンリーダー向けにステータスのラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きを止めてください。似ているモーション
Typing Indicator (タイピングインジケーター)
別名 Typing dots, Chat is typing
吹き出しの中の3つのドットが順に脈打つか浮き上がり、相手や AI が入力中であることを示します。
使いどころ
チャット、AI アシスタント
[適用する場所]にタイピングインジケーター(Typing Indicator)を追加してください。タイピングドット(typing dots)とも呼ばれます。
相手が入力している間、小さなチャットの吹き出しの中のドットが一つずつ浮き上がって明るくなるようにしてください。やわらかく穏やかなリズムで。
ループはつなぎ目なく続け、メッセージが届いたらすぐに吹き出しを消し、スクリーンリーダーにはドットの代わりに短いステータステキストを伝えてください。Bar Loader (Equalizer) (バーローダー)
別名 Bars loader, Audio bars
縦のバーがタイミングをずらして伸び縮みし、オーディオのイコライザーのように見えます。
使いどころ
読み込み中や再生中の表示
[適用する場所]にバーローダー(Bar Loader (Equalizer))の読み込みアニメーションを追加してください。bars loader、オーディオバー(audio bars)とも呼ばれます。
数本の縦バーが、オーディオのイコライザーのように互いにタイミングをずらして伸び縮みするようにしてください。軽快で、でも一定のテンポで。
ループはつなぎ目なく続け、スクリーンリーダー向けに状態を示すラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は動きを止めてください。ABCDEF
Wavy Text (ウェービーテキスト)
別名 Text Wave
文字が順番に上下に揺れ、単語の中を波が流れていくように見えます。
使いどころ
遊び心のある見出し、ローディング表示
[適用する場所]にウェービーテキスト(Wavy Text)エフェクトを追加してください。テキストウェーブ(text wave)とも呼ばれます。
文字を順番に上下させ、やさしくなめらかな波が単語の中を流れ続けるようにしてください。
途切れなくループさせ、スクリーンリーダーには一つの単語として読ませ、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は波を止めてください。Loading & Progressのほかのモーション
Button Loading State (ボタンローディングステート)
別名 Spinner button, Loading button, Button spinner, Submit loading state
処理の実行中、ボタンのラベルが小さなスピナーに置き換わるか、スピナーが追加されます。
使いどころ
フォーム送信、非同期の操作
[適用する場所]にボタンローディングステート(Button Loading State)を追加してください。スピナーボタン(spinner button)、ローディングボタン(loading button)とも呼ばれます。
押すとボタンが軽く沈み、ラベルがフェードアウトして代わりに小さなスピナーが処理中に表示され、終わったらラベルが戻るようにしてください。
読み込み中もボタンの幅は変えず、連続して押せないようにし、処理中であることをスクリーンリーダーに伝えてください。Circular Spinner (サーキュラースピナー)
別名 Spinner, Throbber, Circular indeterminate
リングや円弧が回り続け、読み込み中であることを示します。
使いどころ
ボタン、ページの読み込み
[適用する場所]にサーキュラースピナー(Circular Spinner)を追加してください。スピナー(spinner)、スロバー(throbber)とも呼ばれます。
円弧が薄いリングに沿って一定の速さで回りながら伸び縮みし、なめらかに途切れず動くようにしてください。
回転はつなぎ目なく続け、スクリーンリーダー向けに読み込み中のラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は遅くするか止めてください。Determinate Progress Bar (プログレスバー)
別名 Progress bar fill, Progress Indicator, Progress bar, Circular progress
タスクの進み具合に合わせて、バーが左から右へ満ちていきます。
使いどころ
アップロード、複数ステップのフォーム
[適用する場所]にプログレスバー(Determinate Progress Bar)を追加してください。プログレスバーフィル(progress bar fill)、プログレスインジケーター(progress indicator)とも呼ばれます。
バーは実際の進み具合に合わせて左から右へ満ちていき、更新のたびになめらかに動き、横にパーセンテージを表示してください。
現在値・最小値・最大値を持つ正しいプログレスバーのセマンティクスにしてスクリーンリーダーで読めるようにし、バーが逆戻りしないようにしてください。