Circular Spinner (サーキュラースピナー)
別名 Spinner, Throbber, Circular indeterminate
リングや円弧が回り続け、読み込み中であることを示します。
使いどころ
ボタン、ページの読み込み
バリエーション
- border spinner
- dashed arc
- dual ring
- orbit dots
- infinity loop
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にサーキュラースピナー(Circular Spinner)を追加してください。スピナー(spinner)、スロバー(throbber)とも呼ばれます。
円弧が薄いリングに沿って一定の速さで回りながら伸び縮みし、なめらかに途切れず動くようにしてください。
回転はつなぎ目なく続け、スクリーンリーダー向けに読み込み中のラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は遅くするか止めてください。似ているモーション
Spin (スピン)
別名 Rotate Loop, Spinner
要素が一定の速さで回転し続けます。
使いどころ
読み込み中のスピナー
[適用する場所]にスピン(Spin)効果を追加してください。スピナー(spinner)、ローテートループ(rotate loop)とも呼ばれます。
要素が一定の均一な速さで回り続けるようにし、回転の合間にイージングは入れないでください。
ループは途切れなくし、スピナーにはアクセシブルな読み込み中ラベルを付け、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は遅くするか止めてください。Progress Ring (プログレスリング)
別名 Circular progress, Radial progress, Animated Circular Progress Bar
円弧がリングに沿って伸び、完了した割合を示します。
使いどころ
アップロード、目標、タイマー
[適用する場所]にプログレスリング(Progress Ring)を追加してください。サーキュラープログレス(circular progress)、ラジアルプログレス(radial progress)とも呼ばれます。
上端から円弧が時計回りにリングに沿って伸びて完了した割合を示し、止まるときはゆるやかに減速し、同時に中央の数字もカウントアップするようにしてください。
円弧と数字は同期させ、値は正しいプログレスバーのセマンティクスでスクリーンリーダーに伝えてください。Button Loading State (ボタンローディングステート)
別名 Spinner button, Loading button, Button spinner, Submit loading state
処理の実行中、ボタンのラベルが小さなスピナーに置き換わるか、スピナーが追加されます。
使いどころ
フォーム送信、非同期の操作
[適用する場所]にボタンローディングステート(Button Loading State)を追加してください。スピナーボタン(spinner button)、ローディングボタン(loading button)とも呼ばれます。
押すとボタンが軽く沈み、ラベルがフェードアウトして代わりに小さなスピナーが処理中に表示され、終わったらラベルが戻るようにしてください。
読み込み中もボタンの幅は変えず、連続して押せないようにし、処理中であることをスクリーンリーダーに伝えてください。ドラッグしてください
Pull to Refresh (プルトゥリフレッシュ)
別名 Swipe to refresh
リストを下に引っ張るとスピナーが現れ、離すとコンテンツを再読み込みします。
使いどころ
フィード、受信トレイ
[適用する場所]にプルトゥリフレッシュ(Pull to Refresh)のインタラクションを追加してください。スワイプトゥリフレッシュ(swipe to refresh)とも呼ばれます。
リストを一番上から下に引っ張ると、少し抵抗を感じさせながら指に追従し、引く量に合わせて回るスピナーが現れるようにしてください。離したらコンテンツの再読み込み中もスピナーが回り続け、終わったらリストがなめらかに上へ戻るようにしてください。
リストがすでに一番上までスクロールされているときだけ開始し、キーボードやスクリーンリーダーの利用者向けに通常の更新ボタンも用意してください。Loading & Progressのほかのモーション
Determinate Progress Bar (プログレスバー)
別名 Progress bar fill, Progress Indicator, Progress bar, Circular progress
タスクの進み具合に合わせて、バーが左から右へ満ちていきます。
使いどころ
アップロード、複数ステップのフォーム
[適用する場所]にプログレスバー(Determinate Progress Bar)を追加してください。プログレスバーフィル(progress bar fill)、プログレスインジケーター(progress indicator)とも呼ばれます。
バーは実際の進み具合に合わせて左から右へ満ちていき、更新のたびになめらかに動き、横にパーセンテージを表示してください。
現在値・最小値・最大値を持つ正しいプログレスバーのセマンティクスにしてスクリーンリーダーで読めるようにし、バーが逆戻りしないようにしてください。Indeterminate Linear Progress (不確定プログレスバー)
別名 Indeterminate progress bar, Buffer bar
所要時間がわからないとき、バーの一部がトラックの上を繰り返し流れます。
使いどころ
ページ上部やカードの読み込み
[適用する場所]に不確定プログレスバー(Indeterminate Linear Progress)を追加してください。インデターミネイトプログレスバー(indeterminate progress bar)とも呼ばれます。
タスクの長さがわからない間、短いバーがトラックの端から端へ素早くなめらかに何度も流れるようにしてください。
バーはトラックに完全に入ってから完全に出ていくようにしてループのつなぎ目を見せず、スクリーンリーダー向けに処理中のプログレスバーとしてマークしてください。Multi-Step Loader (マルチステップローダー)
別名 Step loader, Checklist loader
長い処理が進むにつれて、ステップの一覧が一つずつ強調されたりチェックされたりします。
使いどころ
AI による生成、オンボーディング中の処理
[適用する場所]にマルチステップローダー(Multi-Step Loader)を追加してください。ステップローダー(step loader)、チェックリストローダー(checklist loader)とも呼ばれます。
ステップが上から下へ一つずつ点灯し、完了するたびに小さなチェックマークがポンと現れるようにしてください。落ち着いて読みやすいペースで。
ステップは固定タイマーではなく実際の処理の進み具合に合わせて進め、完了したステップをスクリーンリーダーに伝えてください。