1. ホーム
  2. HTML/CSS
  3. ローディングアニメーションをCSSやSVGで実装したまとめ

ローディングアニメーションをCSSやSVGで実装したまとめ

以前までローディングを使う時、gif画像をよく使用していたのですが、最近はcssやsvgでローディングの実装をしているサイトを良く見かけます。過去に参考にさせてもらったものや今度使いたいと思ったのでcodepenで公開されている実装方法のまとめです。

レインボーくるくる

See the Pen CSS loading animation by Patrik Hjelm (@patrikhjelm) on CodePen.0

存在感のあるローディングです。

 

カラフルなボール

See the Pen loading animation by hafiz fattah (@hafizfattah) on CodePen.0

色使いもおしゃれで動きもカワイイ。

 

シャープなローディング

See the Pen CSS loading animation 12 by Martin van Driel (@martinvd) on CodePen.0

立体感があっていい意味で尖ったローディング。

 

波打つような爽やかさ

See the Pen Grooveshark Loading Ideas. by William Richardson (@Smudded) on CodePen.0

企業のロゴなんかを使用してもいいですね。

 

フェードするローディングテキスト

See the Pen Loading Animation CSS by Tatsuya Azegami (@42EG4M1) on CodePen.0

大人っぽいサイトにあう動き。

 

フェードする円

See the Pen CSS Loading Animation by Jimmy Amash (@doncoco) on CodePen.0

こういうフェードは最近多く見受けられます。サラッと入れるといい感じです。



 

SVGを使用したローディング

See the Pen SVG Loading icons by Aurer (@aurer) on CodePen.0

全てSVGで作られたローディングセット。

 

おしゃれなローディングが増えてきているので積極的に取り入れていきたいですね!

HTML/CSSの参考書籍

私がHTML/CSSを勉強したときに使った書籍をご紹介します。

カテゴリー