【CSS】CSSだけで実装できるハイセンスなローディングエフェクト15選！

CSS3になってから、GifやJSで実装していた動きがCSSだけで実装できるようになりました。
CSSだけで実装したほうが読み込みにもポジティブなため、出来る限りCSSで実装するような動きも広がりつつあります。

今までにホバーエフェクトや、テキストエフェクトなどを紹介してきましたが、今回はローディング編です。
ハイセンスなものを例によってCodepenから集めてきました。
参考にどうぞ！

1. Fade Loading (css3)

See the Pen Fade Loading (css3) by magdi (@MagdiMoh) on CodePen.0

フェードでLOADINGの文字が明滅するやつ。オーソドックスなローディング画面ですね。

2. loading css3

See the Pen loading css3 by rana ibrahim (@rana_ibrahim) on CodePen.0

ぴかぴか光るローディングです。ネオンっぽい。ダダダダダッという感じがしてかっこいいですね。

3. Loading CSS3 animation

See the Pen Loading CSS3 animation by Ajay (@ajaymc) on CodePen.0

こちらもフェードで明滅。こちらはぼかしや文字サイズが変わる上にネオンっぽい処理がされてます。一つ前のネオンよりもちょっとムーディな感じですね。

4. Circle Load CSS3

See the Pen Circle Load CSS3 by Alex Ortiz (@AlexOrtizzz) on CodePen.0

くるくる回る系のローディングです。王道ローディングのイメージがあります笑

5. Loading CSS Animation

See the Pen Loading CSS Animation by Costanza Focardi (@MrsTreves) on CodePen.0

引き続きくるくる系ローディング。いろんな色の円がくるくる回っています。構成自体は複雑じゃないのにちょっと工夫するだけでこんなおしゃれなローディングになるんですね。

6. Loading CSS3

See the Pen Loading CSS3 by Husam Alrubaye (@husamui) on CodePen.0

こちらもくるくる系…？ローディング。思わず「おぉ」と声をあげました。スリンキー（じゃばらのおもちゃ）に似ている気がするのは私だけでしょうか。。

7. Loading CSS3

See the Pen Loading CSS3 by Husam Alrubaye (@husamui) on CodePen.0

さきほどのローディングの別バージョンです。円形の図形がくるくる回っていろんな形を作っています。思わずしばらく眺めちゃいますね。

8. Beaulti Circle Load CSS3

See the Pen Beaulti Circle Load CSS3 by Elias (@Roosa) on CodePen.0

細い線で描かれた円が渦を書くようにくるくるしています。渦とか風っぽい感じがありますね。

9. Form loading css

See the Pen Form loading css by Matt Tunney (@matttunney) on CodePen.0

並んだ丸が明滅するバージョンです。こちらもよくあるタイプ。

10. Blured loading (CSS only)

See the Pen Blured loading (CSS only) by Alex (@AlexKP) on CodePen.0

ネオンっぽいラインがうねります。

11. Pendulum Loading Css3 Animation

See the Pen Pendulum Loading Css3 Animation by muhmmed (@midorock2009) on CodePen.0

まるで振り子のようなローディング。ぴょこぴょこしててかわいらしいです。

12. Loading CSS

See the Pen Loading CSS by Ben Hogben (@Ben_Hogben) on CodePen.0

バーが伸びたり縮んだりするローディング。アニメーションの動きがスムーズで見ていて非常ん気持ちがいいです。

13. circles loading css3 animation

See the Pen circles loading css3 animation by moaaz (@moaazmf90) on CodePen.0

二つの円が追いかけっこしているようなアニメーション。色も変わってみていて飽きないです。

14. Loading css

See the Pen Loading css by Doggy (@matsugePatipati) on CodePen.0

いろんなタイプのローディングがあります。こうしてみるとCSSってできる子ですよね

15. Loading – css

See the Pen Loading – css by Olga (@lironka) on CodePen.0

こちらもいろんなタイプのローディングが入っています。四角がくるくる回るのはたまに見かけますけど、面白いですよね。

番外編：Slack Logo Loading CSS Animation

See the Pen Slack Logo Loading CSS Animation by Mark Louie Espedido (@espidesigns) on CodePen.0

このローディング画面を見る人は結構いるんじゃないでしょうか。みなさんおなじみのSlackローディングです。このローディング、個性があっていいですよね。

まとめ

いかがでしたか？
ローディングのような動きのあるものでもCSSでここまでできるんですね。今まではCSSと言えば見た目の装飾にかかわる部分だけが守備範囲だと思っていましたが、JSで処理するような部分にまで成長しているように思えます。
JSを入れるよりも処理が軽い分、需要もありますし今後に期待です。