Progress Ring (プログレスリング)
別名 Circular progress, Radial progress, Animated Circular Progress Bar
円弧がリングに沿って伸び、完了した割合を示します。
使いどころ
アップロード、目標、タイマー
バリエーション
- determinate
- indeterminate
- stroke-dashoffset
- conic-gradient
- counting label
プロンプト
[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。
[適用する場所]にプログレスリング(Progress Ring)を追加してください。サーキュラープログレス(circular progress)、ラジアルプログレス(radial progress)とも呼ばれます。
上端から円弧が時計回りにリングに沿って伸びて完了した割合を示し、止まるときはゆるやかに減速し、同時に中央の数字もカウントアップするようにしてください。
円弧と数字は同期させ、値は正しいプログレスバーのセマンティクスでスクリーンリーダーに伝えてください。似ているモーション
Donut Chart Fill (ドーナツチャートフィル)
別名 Pie Chart Sweep, Animated Donut Chart, Radial Chart Draw
リングや円グラフが時計回りにパーセンテージまで塗りつぶされます。
使いどころ
構成比の内訳
[適用する場所]にドーナツチャートフィル(Donut Chart Fill)アニメーションを追加してください。パイチャートスイープ(pie chart sweep)、アニメーテッドドーナツチャート(animated donut chart)とも呼ばれます。
上端から始めて、各セグメントが順番に時計回りに広がり、リングがそれぞれの割合を示すまで進み、終わりに滑らかに減速するようにしてください。
グラフが画面に入ったときに一度だけ再生し、実際の値はスクリーンリーダー向けにテキストとして読めるようにしてください。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)とも呼ばれます。
バーは実際の進み具合に合わせて左から右へ満ちていき、更新のたびになめらかに動き、横にパーセンテージを表示してください。
現在値・最小値・最大値を持つ正しいプログレスバーのセマンティクスにしてスクリーンリーダーで読めるようにし、バーが逆戻りしないようにしてください。中をスクロールしてください
Scroll Progress Indicator (スクロールプログレスインジケーター)
別名 Reading Progress Bar, Progress Bar
ページや記事をスクロールするにつれて、バーやリングが満たされていきます。
使いどころ
記事、長いページ
[適用する場所]にスクロールプログレスインジケーター(Scroll Progress Indicator)を追加してください。読書進捗バー(reading progress bar)とも呼ばれます。
上端の細いバーが、読み進めた量に合わせて左から右へ伸び、最後まで来たら全幅になるようにしてください。
イージングの遅れなしでスクロール位置に直接連動させ、コンテンツを覆わないようにしてください。Loading & Progressのほかのモーション
Pulse Placeholder (パルスプレースホルダー)
別名 Skeleton pulse, placeholder-glow
グレーのプレースホルダーブロックがゆっくり明滅し、読み込み中であることを示します。
使いどころ
スケルトンスクリーン
[適用する場所]にパルスプレースホルダー(Pulse Placeholder)を追加してください。スケルトンパルス(skeleton pulse)とも呼ばれます。
これから表示されるコンテンツの形をしたグレーのブロックが、そろってゆっくり明るくなっては戻るようにしてください。穏やかで一定のリズムで。
プレースホルダーは実際のレイアウトに合わせてコンテンツが届いたときにずれないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止させてください。Skeleton Shimmer (スケルトンシマー)
別名 Skeleton wave, Shimmer effect, placeholder-wave
グレーのプレースホルダーの上を、明るいハイライトが横切ります。
使いどころ
コンテンツ読み込み中のプレースホルダー
[適用する場所]にスケルトンシマー(Skeleton Shimmer)を追加してください。スケルトンウェーブ(skeleton wave)、シマーエフェクト(shimmer effect)とも呼ばれます。
やわらかな光の帯がグレーのプレースホルダーの上を左から右へ横切り、次の通過まで少し間を置くようにしてください。なめらかで、ゆったりと。
プレースホルダーの形は実際のレイアウトに合わせてコンテンツ読み込み時にずれないようにし、ユーザーがモーションを減らす設定(prefers-reduced-motion)にしている場合は静止したプレースホルダーを表示してください。Top Loading Bar (トップローディングバー)
別名 Page progress bar, NProgress
ページ遷移中、画面上端の細いバーが少しずつ進み、読み込みが終わると端まで到達します。
使いどころ
SPA のルート読み込み
[適用する場所]にトップローディングバー(Top Loading Bar)を追加してください。ページプログレスバー(page progress bar)とも呼ばれます。
上端の細いバーが、ページの読み込み中は最初に素早く進み、その後だんだんゆっくり進むようにし、読み込みが終わったら一気に端まで走ってフェードアウトさせてください。
読み込みが本当に終わるまでは端に届かないようにし、ページのコンテンツを覆ったりずらしたりしないようにしてください。