2019.02.26

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

最近はギガ単位のデータをダウンロードすることもさほど珍しくはなくなってきましたが、ネット上の大容量のデータを受信してサービスが動作するまでに欠かせないのがローディング・アニメーションだったりします。

今回はこのローディング・アニメーションについて良さそうなものをピックアップしてみましたので、ぜひともチェックして使ってもらえればです。

ちょっとクール CSS loading animation 12
ゲームで見かける Rotate / Pulse Loading Animation
ヘキサゴンアニメーション overwatch loading by css3
CSSのみ Cube Flipping Loader
クラウドスパイラル 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
クラウドにアクセス感 Implementation of Animated Icons : Volume II
ゲームで気を紛らわす Tower Blocks
シンプルに Loading Idea
終わりがないけど気になる Infinite domino loader
一味違うローディング Corange Loading Screen
振り子 Newton’s Cradle Loader
ノリに乗っている Loading
まるで生き物 Loading Icon
ずっと見ていたくなる squareception
カラフルな CSS preloader!
折り紙のような動き Cube Fold
動きが気になる Animated SVG Spinner
パルスな Smooth Pulse

ちょっとクール CSS loading animation 12

CSSだけで描かれたものです。
 See the Pen <a href='https://codepen.io/martinvd/pen/xbQJom/'>CSS loading animation 12</a> by Martin van Driel (<a href='https://codepen.io/martinvd'>@martinvd</a>) on <a href='https://codepen.io'>CodePen</a>.

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

ゲームで見かけそうなローディングです。
 See the Pen <a href='https://codepen.io/colinhorn/pen/zdNMVy/'>Rotate / Pulse Loading Animation</a> by Colin Horn (<a href='https://codepen.io/colinhorn'>@colinhorn</a>) on <a href='https://codepen.io'>CodePen</a>.

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

ローディングでなぜか見かけることの多いような気がする六角形のアニメーションです。
 See the Pen <a href='https://codepen.io/CCG/pen/KrANmJ/'>overwatch loading by css3</a> by CCG (<a href='https://codepen.io/CCG'>@CCG</a>) on <a href='https://codepen.io'>CodePen</a>.

CSSのみ Cube Flipping Loader

シンプルですが、アクセントに使いたいですね。これもCSSのみです。
 See the Pen <a href='https://codepen.io/nikhil8krishnan/pen/dMEzGx/'>Cube Flipping Loader</a> by Nikhil Krishnan (<a href='https://codepen.io/nikhil8krishnan'>@nikhil8krishnan</a>) on <a href='https://codepen.io'>CodePen</a>.

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

あまり見ないタイプのアニメーションなので、ユーザーの目には止まりやすいのではないでしょうか。
 See the Pen <a href='https://codepen.io/hakimel/pen/aIhkf/'>Cloudy Spiral CSS animation</a> by Hakim El Hattab (<a href='https://codepen.io/hakimel'>@hakimel</a>) on <a href='https://codepen.io'>CodePen</a>.

心地よい動き Hexagonal Loading Animation

心地よい動きのループです。
 See the Pen <a href='https://codepen.io/aslan11/pen/IxLDJ/'>Hexagonal Loading Animation (CSS3)</a> by Kevin Martin (<a href='https://codepen.io/aslan11'>@aslan11</a>) on <a href='https://codepen.io'>CodePen</a>.

動きに目が止まる Floating Loading Animation

動きに思わず目を止めてしまうアニメーションです。
 See the Pen <a href='https://codepen.io/MarioDesigns/pen/LLrVLK/'>Floating Loading Animation</a> by Mario Duarte (<a href='https://codepen.io/MarioDesigns'>@MarioDesigns</a>) on <a href='https://codepen.io'>CodePen</a>.

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

延々と見ていられそうなループです。
 See the Pen <a href='https://codepen.io/imathis/pen/ZYEWrw/'>Compose loading animation</a> by Brandon Mathis (<a href='https://codepen.io/imathis'>@imathis</a>) on <a href='https://codepen.io'>CodePen</a>.

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

色をアレンジすれば色々と使えそうです。
 See the Pen <a href='https://codepen.io/chilliconcode/pen/KNqGLP/'>Android Nougat Loading Rings- CSS</a> by chilli con code (<a href='https://codepen.io/chilliconcode'>@chilliconcode</a>) on <a href='https://codepen.io'>CodePen</a>.

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

まるで生き物のような動きをします。
 See the Pen <a href='https://codepen.io/rafaelderolez/pen/vNKBxg/'>Colourful loading animation</a> by Rafael Derolez (<a href='https://codepen.io/rafaelderolez'>@rafaelderolez</a>) on <a href='https://codepen.io'>CodePen</a>.

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

四角形があるわけではないのに、四角形が見えてしまう動きが面白いです。
 See the Pen <a href='https://codepen.io/raymondyang/pen/eWGewE/'>Square in a circle – Loading Animation</a> by Ray (<a href='https://codepen.io/raymondyang'>@raymondyang</a>) on <a href='https://codepen.io'>CodePen</a>.

六角形 Hexagon Preloader

動きがぎこちなく感じる場合は、下記リンク先にアクセスしてみてください。
https://codepen.io/weaintplastic/pen/qEMZbx
 See the Pen <a href='https://codepen.io/weaintplastic/pen/qEMZbx/'>Hexagon Preloader</a> by Roland Lösslein (<a href='https://codepen.io/weaintplastic'>@weaintplastic</a>) on <a href='https://codepen.io'>CodePen</a>.

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

クラウドにアクセス、ローディングしている感が感じられます。
 See the Pen <a href='https://codepen.io/pBun/pen/sHCzt/'>Implementation of Animated Icons : Volume II</a> by Dustin Boersma (<a href='https://codepen.io/pBun'>@pBun</a>) on <a href='https://codepen.io'>CodePen</a>.

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

ローディングというよりも、ゲームです。ユーザーを待たせている間、ゲームをやって貰うことで待ち時間を感じさせない工夫を凝らせることができます。
 See the Pen <a href='https://codepen.io/ste-vg/pen/ppLQNW/'>Tower Blocks</a> by Steve Gardner (<a href='https://codepen.io/ste-vg'>@ste-vg</a>) on <a href='https://codepen.io'>CodePen</a>.

シンプルに Loading Idea

これもシンプルですが、アクセントで使いたいシンプルならローディングです。
 See the Pen <a href='https://codepen.io/chasehsbrk238/pen/gbqYyj/'>Loading Idea</a> by Chase (<a href='https://codepen.io/chasehsbrk238'>@chasehsbrk238</a>) on <a href='https://codepen.io'>CodePen</a>.

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

いつか終わりがあるんじゃないかと感じさせてくれるループアニメーションです。
 See the Pen <a href='https://codepen.io/Moiety/pen/xbJdLJ/'>Infinite domino loader</a> by Zoë (<a href='https://codepen.io/Moiety'>@Moiety</a>) on <a href='https://codepen.io'>CodePen</a>.

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

サイト関連のデータをロード、チェック、と一味違うローディングが楽しめます。動きがない場合は、右下の「Return」をクリックしてください。
 See the Pen <a href='https://codepen.io/hoqqanen/pen/zvqGEG/'>Corange Loading Screen</a> by George Hoqqanen (<a href='https://codepen.io/hoqqanen'>@hoqqanen</a>) on <a href='https://codepen.io'>CodePen</a>.

振り子 Newton's Cradle Loader

振り子ですね。
 See the Pen <a href='https://codepen.io/AllThingsSmitty/pen/zxGyXd/'>Newton's Cradle Loader</a> by Matt Smith (<a href='https://codepen.io/AllThingsSmitty'>@AllThingsSmitty</a>) on <a href='https://codepen.io'>CodePen</a>.

ノリに乗っている Loading

ノリに乗ってそうなポンピングがいいですね。
 See the Pen <a href='https://codepen.io/dicson/pen/vOxZjM/'>Loading</a> by Dicson (<a href='https://codepen.io/dicson'>@dicson</a>) on <a href='https://codepen.io'>CodePen</a>.

まるで生き物 Loading Icon

サンプルが多すぎて動きが鈍くなっているようなら下記のリンク先で見てください。
https://codepen.io/bennettfeely/pen/jEwXJO
 See the Pen <a href='https://codepen.io/bennettfeely/pen/jEwXJO/'>Loading Icon</a> by Bennett Feely (<a href='https://codepen.io/bennettfeely'>@bennettfeely</a>) on <a href='https://codepen.io'>CodePen</a>.

ずっと見ていたくなる squareception

コレ系はなんか不思議な感じがあって思わず見ていたくなります。
 See the Pen <a href='https://codepen.io/lesbaa/pen/XbBOXy/'>CSS3 Transform Loader – squareception</a> by Les (<a href='https://codepen.io/lesbaa'>@lesbaa</a>) on <a href='https://codepen.io'>CodePen</a>.

カラフルな CSS preloader!

ド派手なアニメーションのローディングです。かなり目を引くのではないでしょうか。
See the Pen <a href="https://codepen.io/Maseone/pen/rGapf/">CSS preloader!</a> by Paul (<a href="https://codepen.io/Maseone">@Maseone</a>) on <a href="https://codepen.io">CodePen</a>.

折り紙のような動き Cube Fold

四角形が徐々に折りたたまれて箱ができあがるというアニメーションですが、これもCSSアニメーションプリローダーにおすすめです。
See the Pen <a href='https://codepen.io/mikehobizal/pen/AKavB/'>Cube Fold – CSS Animated Preloader</a> by Michael Hobizal (<a href='https://codepen.io/mikehobizal'>@mikehobizal</a>) on <a href='https://codepen.io'>CodePen</a>.

動きが気になる Animated SVG Spinner

なんのアニメーションだろう？とユーザーの興味を引きつける動きのプリローダーです。
See the Pen <a href='https://codepen.io/diagramatics/pen/wjmDu/'>CSS-Animated SVG Spinner/Loader</a> by Steven Sinatra (<a href='https://codepen.io/diagramatics'>@diagramatics</a>) on <a href='https://codepen.io'>CodePen</a>.

パルスな Smooth Pulse

これもシンプルですが、プリローダーに使え、マウスオーバーをするとさらに色が変わります。
See the Pen <a href='https://codepen.io/Raphael/pen/fqweF/'>Smooth Pulse</a> by Raphael (<a href='https://codepen.io/Raphael'>@Raphael</a>) on <a href='https://codepen.io'>CodePen</a>.