ローディング
読み込みを待つあいだに見せる、ローディングの演出です。数字や円形のゲージで進み具合を伝えるもの、点が跳ねたり軌跡を走ったりするもの、読み込みを終えて画面が上下に開くものを、デモとコードで紹介しています。
ローディングのインタラクション（28件）
-
-
スクロールで記事の読了バーが伸び、読んだ割合を % で示す
-
ローディングのバーと数字が 0 → 100% に進む
-
ローディングの % に合わせて大きな文字の中が下から満ちる
-
ローディング中にロゴマークを線で描いてから塗る
-
ローディングの長さの変わる帯が流れ続ける不定進捗バー
-
ローディング中に波紋が広がって消える
-
ローディング中に立方体が転がるように回る
-
ローディング中に四角が 3D で裏返り続ける
-
ローディング中に点が円周を追いかけ合う
-
ローディング中に 12 本の線が順に濃くなるスピナー
-
ローディング中に丸の中を波打つ液体が満ちていく
-
ローディング中に粘りのある玉がくっついて離れる
-
ローディング中に二重らせんの点が回り続ける
-
ローディング中に円弧が伸び縮みしながら回る
-
ローディング中に縦棒が波打つ
-
ローディング中に丸・三角・四角と形を変え続ける
-
ローディングの「LOADING」の文字に光が走る
インタラクションデザインについて、
ここに並べているのは、Web サイトの中で動く UI のサンプルです。新しく作るサイトに組み込むことも、いま公開中のサイトに、ボタンやヒーロー、スクロールの演出だけを足すこともできます。設計から実装までの進め方はWeb サイト制作、端末ごとの見え方や表示速度の考え方はレスポンシブウェブサイトのページにまとめています。映像として作る動きをお探しの場合はモーショングラフィックスをご覧ください。