ローディングスピナー

Spinner

処理時間や進捗の割合がわからない不定長の待機状態を、回転するアニメーションで示すフィードバックUI。

○ 使う場面

  • 処理にかかる時間や進捗の割合が、あらかじめわからないとき
  • ボタン内など、局所的に短時間の待機状態を示したいとき

× 避ける場面

  • 進捗の割合を算出でき、具体的な数値で示せるとき(→進捗バー)
  • 読み込み後のレイアウトの形をあらかじめ予告したいとき(→スケルトンスクリーン)

別名

スピナー、ローディングインジケーター、くるくる、ロードインジケーター

近縁種との比較

「スピナー」は英語のspin(回転する)に由来し、くるくる回るもの全般を指す語である。回転そのものに意味的な情報はなく、処理が継続中であることをアニメーションの動きだけで伝える最小限のフィードバックとして使われる。

近縁種違い・使い分け
進捗バー進捗バーとローディングスピナーは同じ「処理中」を示すフィードバックUIだが、進捗の割合を算出できる確定的な処理(determinate)には進捗バー、算出できない不定長の処理(indeterminate)にはローディングスピナーを使うという使い分けが定番である。
スケルトンスクリーンスケルトンスクリーンは「まだ何もわからない」ことだけを抽象的に示すローディングスピナーと異なり、読み込み後のレイアウトの形をあらかじめ見せて体感速度を上げる。
空状態読み込み中であることを示すローディングスピナーと、結果が0件だと確定した後に出す空状態は、「結果が確定する前か後か」という一点で明確に区別される。

分類

機能・役割
  • ナビゲーション
  • 入力・操作
  • 表示・整理
  • フィードバック・状態
表示レイヤー
  • インライン
  • 固定・追従
  • オーバーレイ
  • 全画面・遷移
複雑さ
  • 単体パーツ
  • 複合パーツ
  • セクション