ローディング
読み込みを待つあいだに見せる、ローディングの演出です。数字や円形のゲージで進み具合を伝えるもの、点が跳ねたり軌跡を走ったりするもの、読み込みを終えて画面が上下に開くものを、デモとコードで紹介しています。
ローディングのインタラクション（29件）
-
-
ローディングの終わりに、円とチェックを線で描いて完了を伝える
-
ローディング中に砂が落ちきると砂時計が返る
-
チャットの返信を待つローディングの点が波打ち、そのまま届いたメッセージの吹き出しに広がる
-
画像のローディング中はぼかした仮の画像を見せ、届いたものからピントが合って鮮明になる
-
ローディング中のスケルトンのカードにきらめきが流れる
-
ローディングが終わるとカーテンが上がってページが現れる
-
ローディングの数字が 100 に達すると画面が上下に割れて開く
-
ローディングの点が ∞ の軌跡を走る
-
ローディングの進捗が円形のゲージと % で 0 から 100 に進む
-
ローディング中に 3 つの点が順に跳ねる
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。