CSSで作るローディングアニメーション40選〜待ち時間を楽しくするテクニック

今回は、cssのみで（コピペで）実装できるローディングアニメーションをまとめた記事になっています。

ローディングはかつてはgifアニメで作られることが多かったですが、現在は複雑なことができるcss3によって実装されるケースがほとんどです。
jsより学習コストも低く、ブラウザに負荷もかけないので良いことづくめと言えます。

ただ、普段から感じていたことですが、ローディングのようなちょっと特殊なcssを書くことって本職のコーダーでもあまりありませんよね？

案件によって作ったり作らなかったり、それも案件ごとに基本1つしか作らないと思うので慣れていない人が多くても当然だと思います。
そんなwebデザイナー、コーダー、フロントエンドエンジニアの皆さまを対象に、コピペで実装できるローディングアニメーションをまとめました。

doneローディングアニメーション実装するメリットは大きい

codepenからのまとめですが、大元から探したり、自作するより時短になると思うのでぜひブックマークしてお使いください〜
それではどうぞ！

【コピペOK】CSSで作るローディングアニメーション40選

宇宙を感じさせるスピンアニメーション

色合いがとっても素敵です。rotate3dをanimationで動かすことで実現しています。

See the Pen CSS Loading Animations by Alex (@AlexWarnes) on CodePen.

ユニークな動き多め

グラフっぽいアニメーションが面白いですね。

See the Pen CSS Loading Animations by Oli Laban (@olilaban) on CodePen.

球体の動きがかわいい

ただの丸でも工夫次第で目を引くアニメーションに。

See the Pen CSS Loaders by Mark JC (@mjcabangon) on CodePen.

複雑な動きもお手のもの

扇風機のような動きもできます。

See the Pen CSS Loading Spinners by Beau (@Beaugust) on CodePen.

うねうね動く

丸を複数並べて、動かすだけでそれっぽくなります。

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

回転＋虹色アニメーション

驚くべきことに、linear-gradientプロパティを使わずにグラデーションを表現しています。

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

ベーシックなアニメーションからちょっと捻ったものまで

一番上のはよく見るやつですね。他にも線が動くかわいいアニメーションが多いです。

See the Pen CSS Loading Spinners by Harold Soto (@bernethe) on CodePen.

奥から手前に、手前から奥に

単純なcssで奥行きを表現できています。

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

バウンドが楽しそうな気持ちに

なんとバウンドまで表現できます。scaleでべちゃっとした形を表現しています。

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

cssだけでバーアニメーション！

ローディングバーはjsでしか実装できないと思っている人が多いと思いますが、実はcssだけでもできちゃいます。

See the Pen A pure CSS loading bar by Robin Rendle (@robinrendle) on CodePen.

回転アニメーションまとめ

基本的ですが、よく使いますよね。イージングを工夫するだけで一気にユニークになります。

See the Pen CSS loading spinners by Lubna (@Lubna) on CodePen.

楽しそうな気持ちになるアニメーションまとめ

アニメーションは、単純な要素の反復のみでも十分ユニークに見えることを教えてくれる作例です。

See the Pen CSS spinners by Iulian Savin (@Iulius90) on CodePen.

スタイリッシュなサイトでも使えそう

素早い動きは、カッコいいwebサイトにもマッチしそうですよね。

See the Pen Loading screen by Luka Butina (@luka-butina) on CodePen.

ちょっと工夫してユニークな動き

四角形を動かすだけでここまで面白いアニメーションになります。

See the Pen CSS Loading Boxes Animation by Andréas Lundgren (@adevade) on CodePen.

複雑なアニメーションも実は簡単

一見専用ソフトで作成したアニメーションに見えますが、実はcssだけで実装。驚きですよね。

See the Pen Car loader | CSS Loading animation by Karsten Marijnissen (@karstenmarijnissen) on CodePen.

膨張＋回転

「LOADING…」のドットが増えていくのも素敵です。

See the Pen CSS Loading Screen #1 by Jove Angelevski (@AlbertFeynman) on CodePen.

レトロなローディングも魅力的

昔どこぞでよく見たローディングですね。改めて見ると魅力的です。

See the Pen Pure CSS Loading Spinner by Jonas Røssum (@joglr) on CodePen.

ネオンが気持ちいい

リズムの良いネオンがワクワクする気持ちにさせてくれます。アニメーションもそうですが、スタイリングも参考になりますね。

See the Pen CSS “Loading” Animation by CurleyWebDev (@curley) on CodePen.

滝のようにテキストが流れる

またまた発想の勝利。上から下にテキストを移動させるだけでご覧の通り。

See the Pen Small CSS Loading Animation by Izzy Skye (@chrysokitty) on CodePen.

波打つようにテキストが動く

ビッタンビッタンテキストが波打ちます。永遠に見ていられます。

See the Pen Pure Css Loading Annim by myles jackson (@myleh) on CodePen.

かわいいアニメーション詰め合わせ

「DROPLET」が個人的に好きです。あと色合いもかわいいですね。

See the Pen Single-Element CSS Loaders by Jason Kobilka (@jkobilka) on CodePen.

超激しい！嵐のようなアニメーション

激しいですね〜笑 cssの表現力には限度がありません。

See the Pen css loading by Robert Lemon (@rlemon) on CodePen.

ゲームのローディングのようなカッコいいアニメーション

box-shadowの重ねがけでリアルなネオンを作り出しています。

See the Pen css loading #01 by webhybrid (@Webhybrid) on CodePen.

短調だけど、みていて飽きない

実装も簡単で、見ていて飽きません。使いどころが多そうです。

See the Pen CSS Loading Animations by Adrian (@awade) on CodePen.

回転＋ぼかしで不思議な雰囲気

まるで宇宙にいるようなアニメーションが気持ちいいです。

See the Pen css loading experiment by mment (@mment) on CodePen.

よく見るローディング

こちらもよく見る動きですが、使いどころが多そう。色をプライマリーカラーに変えるだけで素敵に見えます。

See the Pen CSS Loading Square Animation by Vlad Shapochnikov (@vladshap) on CodePen.

回転も組み合わせれば個性的に

こちらも発想の勝利です。見ていて不思議な気持ちになります。

See the Pen Multidot Pure CSS Loader by Lucas Roe (@glucasroe) on CodePen.

テキストが順に点灯する

ネオンがまるで本物のように点灯します。キレイですね。

See the Pen css-loading by Carlos Nucette (@cjnucette) on CodePen.

昔のプレステのような

一昔前よくみたローディングです。cssで再現できちゃうんですね〜

See the Pen CSS Loading Graphic by Laerin (@xgundam05) on CodePen.

幻想的でキレイ

filterで色相を変化させています。幻想的ですね！

See the Pen Creative CSS Loading Animation by Youssef Shaaban Hamdallah (@youssef11296) on CodePen.

グラデーションが回転する

グラデーションがとっても優雅に見えます。先進的なサイトのデザインにぴったり。

See the Pen loading animation Demo10 by didi (@didichaoren) on CodePen.

波打つアニメーション

波紋のようなアニメーションもtransition-delayを使いこなすことで簡単に実装できちゃいます。

See the Pen Pure css loading by Abdelrahman Masoud (@AbdulrahmanMasoud) on CodePen.

テキストのシャドウがぐるぐる回る

これ、ちょっと難しいですね。sinやcosという関数を使って複雑なアニメーションを実装しています。（サインとかコサイン見たの学生とき以来ですね。。頭痛くなってきました）

See the Pen Pure CSS Loading 100% by Chandra Shekhar (@chandrashekhar) on CodePen.

回転がかわいい

動きはもちろんのこと、色合いもかわいいです。

See the Pen loading animation Demo1 by didi (@didichaoren) on CodePen.

スタイリッシュでカッコいい

これまたスタイリッシュなサイトで使いそうなイケてるアニメーションです。

See the Pen Another CSS Loading Animation by Will Phillips Jr (@nolawill) on CodePen.

シンプルだけど注意を引くアニメーションの詰め合わせ

どれもよく見るローディングですが、色や速さを変えるだけでどんなサイトにも合いそうです。

See the Pen Pure CSS Loading Icons by Aleix (@Aleix) on CodePen.

カラフルで楽しい

色を工夫してあげるだけで印象深いアニメーションに。

See the Pen CSS Loading Animations by GEOX (@GeoxCodes) on CodePen.

スキャンで色がつくイメージ

::beforeをうまく使いこなすことで面白い動きを実現しています。

See the Pen Css | Loading Animation by Büşra Memiş (@busramemis) on CodePen.

光彩がキレイ

まるでどこかの惑星のようです。ずっと見てるとちょっと怖いかも。

See the Pen Pulsing neon effect by Alexis Riche (@alexisr) on CodePen.

プルプル動いてかわいい

かわいいアニメーションですね。待ち時間のストレスもだいぶ軽減されそうです。

See the Pen CSS Loading Animation by Kapilraj Parameswararajah (@Kapilnemo) on CodePen.

まとめ

いかがでしたか？

今回はcssで作るローディングアニメーションをまとめてみました。

皆さまの参考になれば嬉しいです。
それでは本日はここら辺で。

doneこの記事を見ているあなたにオススメの本