イケてるローディング・アニメーション25選

最近はギガ単位のデータをダウンロードすることもさほど珍しくはなくなってきましたが、ネット上の大容量のデータを受信してサービスが動作するまでに欠かせないのがローディング・アニメーションだったりします。 今回はこのローディング・アニメーションについて良さそうなものをピックアップしてみましたので、ぜひともチェックして使ってもらえればです。 関連：使える！CSSアニメーション 20選

ちょっとクール CSS loading animation 12

CSSだけで描かれたものです。

ゲームで見かける Rotate / Pulse Loading Animation

ゲームで見かけそうなローディングです。

ヘキサゴンアニメーション overwatch loading by css3

ローディングでなぜか見かけることの多いような気がする六角形のアニメーションです。

CSSのみ Cube Flipping Loader

シンプルですが、アクセントに使いたいですね。これもCSSのみです。

クラウドスパイラル Cloudy Spiral CSS animation

あまり見ないタイプのアニメーションなので、ユーザーの目には止まりやすいのではないでしょうか。

心地よい動き Hexagonal Loading Animation

心地よい動きのループです。

動きに目が止まる Floating Loading Animation

動きに思わず目を止めてしまうアニメーションです。

ブロックループアニメーション Compose loading animation

延々と見ていられそうなループです。

色をアレンジして楽しめる Android Nougat Loading Rings

色をアレンジすれば色々と使えそうです。

飛び跳ねる生き物のよう Colourful loading animation

まるで生き物のような動きをします。

目に見えない四角形 Square in a circle

四角形があるわけではないのに、四角形が見えてしまう動きが面白いです。

六角形 Hexagon Preloader

動きがぎこちなく感じる場合は、下記リンク先にアクセスしてみてください。 https://codepen.io/weaintplastic/pen/qEMZbx

クラウドにアクセス感 Implementation of Animated Icons : Volume II

クラウドにアクセス、ローディングしている感が感じられます。

ゲームで気を紛らわす Tower Blocks

ローディングというよりも、ゲームです。ユーザーを待たせている間、ゲームをやって貰うことで待ち時間を感じさせない工夫を凝らせることができます。

シンプルに Loading Idea

これもシンプルですが、アクセントで使いたいシンプルならローディングです。

終わりがないけど気になる Infinite domino loader

いつか終わりがあるんじゃないかと感じさせてくれるループアニメーションです。

一味違うローディング Corange Loading Screen

サイト関連のデータをロード、チェック、と一味違うローディングが楽しめます。動きがない場合は、右下の「Return」をクリックしてください。

振り子 Newton’s Cradle Loader

振り子ですね。

ノリに乗っている Loading

ノリに乗ってそうなポンピングがいいですね。

まるで生き物 Loading Icon

サンプルが多すぎて動きが鈍くなっているようなら下記のリンク先で見てください。 https://codepen.io/bennettfeely/pen/jEwXJO

ずっと見ていたくなる squareception

コレ系はなんか不思議な感じがあって思わず見ていたくなります。

カラフルな CSS preloader!

ド派手なアニメーションのローディングです。かなり目を引くのではないでしょうか。

折り紙のような動き Cube Fold

四角形が徐々に折りたたまれて箱ができあがるというアニメーションですが、これもCSSアニメーションプリローダーにおすすめです。

動きが気になる Animated SVG Spinner

なんのアニメーションだろう？とユーザーの興味を引きつける動きのプリローダーです。

パルスな Smooth Pulse

これもシンプルですが、プリローダーに使え、マウスオーバーをするとさらに色が変わります。