
映画の公式サイトで見かけたローディングを集めました。

## 一定の動きを繰り返す「スピナー」

![the circle](./loading_thecircle.gif)  
「The Circle（[http://thecircle.movie/](http://thecircle.movie/)）」より

読み込み中は画像やアニメーションが一定の速度で同じ動きを繰り返し、読み込みが終わるとコンテンツが表示されます。スピナータイプのローディングは、読み込みの進行具合がわからないため、読み込み時間が短い場合に向いています。  
「The Circle」のローディングでは、読み込み中はロゴの「C」が回転を続け、読み込みが終わると映画のタイトルの「THE CIRCLE」がフェードインしながら表示されます。回転するアニメーションはCSSアニメーションのkeyframeで作成されています。

## 「%」で読み込みの進捗を表示

![Free Fire](./loading_freefire.gif)  
「Free Fire Official Movie Site（http://freefire-movie.com/）」より

読み込みの進行具合にあわせて、数字が0%から100%まで増えていきます。数字のカウントはJavaScriptで作成されています。%表示は読み込みがどの程度完了しているか一目でわかりやすく、「読み込み完了まで残りどれくらいかかるのか」の目安になります。

## 「プログレスバー」で読み込みの進捗を表示

![It](./loading_it.gif)  
「IT – Official Movie Site –（[http://itthemovie.com/](http://itthemovie.com/)）」より

読み込みの進行具合にあわせて画面に水平に引かれた白いラインが、画面の左から右へ濃くなっていきます。プログレスバーのアニメーションはTweenMaxで作成されています。前述の％表示と同様に読み込みの進捗が一目でわかります。

![gifted](./loading_gifted.gif)  
「Gifted | Fox Searchlight（[http://www.foxsearchlight.com/gifted/](http://www.foxsearchlight.com/gifted/)）」より

プログレスバーとは少し形が違いますが、読み込みの進捗に合わせて画面上の要素が変化していく部分は同じです。例ではロゴの色が左から徐々に塗られていきます。ロゴの画像を色違いで2つ用意し、CSSで徐々に色が変化するように見せています。ローディング画面の表示・非表示はプラグイン「pace.js」が使用されています。

## 「プログレスバー」と「%」を組み合わせたローディング

![It](./loading_johnwick2.gif)  
「JOHN WICK 2 | Official Site（[http://www.johnwick.movie/](http://www.johnwick.movie/)）」より

前述の「%」表示と「プログレスバー」を組み合わせて進捗がよりわかりやすくなっています。この映画では主人公のビジュアルとロゴも組み合わせてデザインされたローディング画面になっています。

## SVGアニメーション

![It](./loading_jakie.gif)  
「Jackie | Fox Searchlight（[http://www.foxsearchlight.com/jackie/](http://www.foxsearchlight.com/jackie/)）」より

読み込みの進捗にあわせてアルファベットが描画されるアニメーションを使用したローディングです。映画のロゴの「J」はSVGで作成されています。Jの字が完成すると残りの「ackie」のpng画像がフェードインするアニメーションです。

![Frolida Project](./loading_frolidaproject.gif)  
「Frolida Project（[http://floridaproject.movie/](http://floridaproject.movie/)）」より

こちらも前述の映画と同様にSVGアニメーションを使用したローディングです。アニメーションする対象も同様にロゴですが、文字の枠線が描画されてから、白く塗られるというアニメーションになっています。


映画公式サイトで使われているローディング画面7選

Tags