コピペで使うローディングアニメーション！

サイトの閲覧時に飽きさせないためにローディングアニメーションを導入してみるのはどうでしょう。
SVGを使用してのアニメーションやCSSのみのアニメーションをまとめてみましたので一度見てみてください！

CSS loading animation

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

Her – OS1 Loading

See the Pen Her – OS1 Loading by Siyoung Park (@psyonline) on CodePen.

CodePen Home CSS loading animation 12

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

Yet another loading animation

See the Pen Yet another loading animation by Austin Zach (@austinmzach) on CodePen.

SVG Loading Animation

See the Pen SVG Loading Animation by Joel T Bennett (@JTBennett) on CodePen.

CSS Loading Animation

See the Pen CSS Loading Animation by Ahmad Emran (@ahmadbassamemran) on CodePen.

Loading!

See the Pen Loading! by RenGM (@Vidy) on CodePen.

Dump Truck Loading Animation

See the Pen Dump Truck Loading Animation by Jon Kantner (@jkantner) on CodePen.

CSS3 loading animation meets Bauhaus

See the Pen CSS3 loading animation meets Bauhaus by André Rusakow (@andrew_secret) on CodePen.

Loading | CSS

See the Pen Loading | CSS by Julie Park (@juliepark) on CodePen.

Loading Rainbow Animation

See the Pen Loading Rainbow Animation by Arno Faure (@studionora) on CodePen.

まとめ　ローディングアニメーションをまとめてみました。

サイトの閲覧時に飽きさせないためにローディングアニメーションを導入してみるのはどうでしょう。
SVGを使用してのアニメーションやCSSのみのアニメーションをまとめてみましたので一度見てみてください！

関連記事

• コピペで簡単！カード型のデザインサンプル9選
• コピペで簡単！アニメーションボタンをまとめてみました。
• コピペで簡単！レスポンシブル対応のヘッダーメニュー
• コピペで使うcss/jsのひと味違うスライドショー