creatersnest

待つのも楽しくなるローディングアニメーション30選


以前はローディング画面には
アニメーションgifを使用することが多かったですが、
最近ではSVGやcssのみで実装するということが増えてきました。

 

今回はSVGやcssを利用して実装できる
お洒落で動きのあるローディング画面の案をご紹介します!

 

花柄アニメーション

 

http://www.css-spinners.com/

円が回転して花びらになるアニメーションです。
ガーリーな感じのサイトにはぴったりですね!

 

 

ボール遊びちっくなアニメーション

http://www.css-spinners.com/

左右の板でボールを跳ね返すアニメーションです。
まるでゲームをみているようなローディング画面が実装できます!

 

 

ハート型アニメーション

 

http://www.css-spinners.com/

ハートが拡大縮小しながらアニメーションします。
ドキッという言葉がよく当てはまるアニメーションです。

 

 

サークルアニメーションver.1

サンプルhttp://projects.lukehaas.me/css-loaders/

連なっている円が、円を描きながらアニメーションします。
シンプルでよく見るローディングアニメーションですが、
cssで実装できてしまうので便利です。

 

 

サークルアニメーションver.2

サンプルhttp://projects.lukehaas.me/css-loaders/

 

円の色が変わっていくアニメーションです。
こちらもよく見かけるデザインとなっております。

 

 

サークルアニメーションver.3

サンプルhttps://connoratherton.com/loaders

円と円の間を拡大、縮小しながらすり抜けるアニメーションです。

 

 

サークルアニメーションver.4

サンプルhttp://tympanus.net/codrops/2012/11/14/creative-css-loading-animations/

円が回転し、Loadingの文字も順番に色が変わっていくアニメーションです。
cssで色の調整をすればいろいろなサイトに合いそうですね!

 

 

サークルアニメーションver.5

サンプルhttp://tympanus.net/codrops/2012/11/14/creative-css-loading-animations/

円が右回転したり左回転したりしながらアニメーションします。
ずっとみているとコマのようにみえます!

 

 

サークルアニメーションver.6

サンプルhttp://www.alessioatzeni.com/blog/css3-loading-animation-loop/

内側の円と外側の円が逆回転してアニメーションします。
ネオンカラーなのがかっこいいですね!

 

 

サークルアニメーションver.7

サンプルhttp://www.alessioatzeni.com/blog/css3-loading-animation-loop/

外側の円と内側の円がそれぞれ違うアニメーションをします。
それぞれ違うアニメーションをしますが、
機械のように見えてかっこいいです!

 

サークルアニメーションver.8

サンプルhttp://codepen.io/florian-wirtz/pen/CclrF

円が整列しながら回転するアニメーションです。
アニメーションが複雑なので
サンプルのように暗い背景写真にするとお洒落に見えます!

 

 

 

ウェーブアニメーションver.1

サンプルhttp://projects.lukehaas.me/css-loaders/

長方形が拡大縮小しながら移動していくアニメーションです。
音の波を見ているようです。

 

 

ウェーブアニメーションver.2

サンプルhttp://webdesign.tutsplus.com/tutorials/creating-a-collection-of-css3-animated-pre-loaders–cms-21978

こちらも音の波を見ているように動くアニメーションです。
ver.1はシンプルですが、こちらは色に変化をつけています。

 

 

ウェーブアニメーションver.3

サンプル

http://codepen.io/JesGraPa/pen/Hyaiw

音の波形を見ているようなアニメーションです。
ver.3より、よりダイナミックに動きます。

 

 

ウェーブアニメーションver.4

サンプルhttp://codepen.io/JesGraPa/pen/Hyaiw

まるで風に吹かれて揺れているようなアニメーションです。
オブジェクトをいろいろな形に変えても楽しいかもしれません!

 

 

 

スクエアアニメーションver.1

サンプルhttp://tobiasahlin.com/spinkit/

四角形が大きさを変えながら回っていくアニメーションです。

 

 

スクエアアニメーションver.2

サンプルhttp://tobiasahlin.com/spinkit/

四角形が折り畳まれながらアニメーションします。

 

 

スクエアアニメーションver.3

サンプルhttp://tobiasahlin.com/spinkit/

四角形が崩れながらアニメーションします。

 

 

スクエアアニメーションver.4

サンプルhttp://tympanus.net/codrops/2012/11/14/creative-css-loading-animations/

四角形が回転し、外側の円の色も変化していくアニメーションです。

 

 

スクエアアニメーションver.5

サンプルhttp://www.alessioatzeni.com/blog/css3-loading-animation-loop/

中心からそれぞれ端に向かってアニメーションします。
こちらもネオンカラーなのでかっこいい感じのサイトにぴったりです。

 

 

振り子アニメーション

サンプルhttp://www.codesynthesis.co.uk/tutorials/pure-css-loading-spinners

振り子のようなアニメーションです。
見ていて飽きないのでずっと見れてしまいます!

 

 

キューブアニメーション

サンプルhttp://www.codesynthesis.co.uk/tutorials/pure-css-loading-spinners

立体形のキューブが回転するアニメーションです。
立体に見えるキューブがいい感じですね!

 

 

バウンドアニメーションver.1

 

サンプルhttp://www.codesynthesis.co.uk/tutorials/pure-css-loading-spinners

ボールがバウンドするアニメーションです。
本物のボールのようにバウンドするので、
見ていて楽しいアニメーションです。

 

 

バウンドアニメーションver.2

サンプルhttp://codepen.io/ptbeezy/pen/hpFzg

円がバウンドしながら波打つアニメーションです。
シンプルですが面白い動きとなっています。

 

 

 

浮かび上がるアニメーション

サンプルhttp://codepen.io/diegopardo/pen/dGlfC

「LOADING」という文字が浮かびあがるアニメーションです。
画像ではないので好きな文字を入れれるところがいいですね!

 

 

DIRT3アニメーション

サンプルhttp://red-team-design.com/css3-loading-animation-experiment/

DIRT3というゲームのUIにインスピレーションを得て作成された
ローディングアニメーションです。

 

パックマンアニメーション

サンプルhttps://connoratherton.com/loaders

パックマンのようなアニメーションをします。
画像を使用しないでもここまで表現できてしまいます!

 

 

水滴アニメーション

サンプルhttps://connoratherton.com/loaders

水滴が落ちて円が広がっていくようなアニメーションをします。

 

 

グラデーションアニメーションver.1

サンプルhttp://codepen.io/0x04/pen/dGwBJ

ぐるぐるとグラデーションカラーが移動します。
borderを使用してアニメーションを作成しています。

 

 

グラデーションアニメーションver.2

サンプルhttp://codepen.io/0x04/pen/dGwBJ

ver.2の中抜きバージョンです。
グラデーション具合はアルファ値で調整しているので、
簡単に色違いを作成できますね!

 

 

まとめ

 

如何だったでしょうか。
cssやSVGベースのものだと修正や色変更が簡単にできて楽ですよね!

みなさんも今日ご紹介したサンプルを参考に
ぜひ凝ったローディング画面を作成してみてください!

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Articleスマホサイトでも崩れないテーブルを実装する方法