待ち時間をもっと楽しく!コピペできるCSSローディングアニメーション38個まとめ

loading-animation-top

 

開いているウェブページが読み込み中であることを、分かりやすく伝えるローディングアニメーション。これまではGIFなどで作成されることもしばしばでしたが、CSSの進化によって自由でカスタマイズ性の高いローディングアニメーションがたくさん登場しています。

 

 

今回はコピペで利用できるCSSローディングアニメーションを、コミュニティサイト Codepen よりピックアップしご紹介します。

 

 

よりオリジナル性の高いデザインを作成することができ、待ち時間が楽しみになるようなエフェクトを中心に揃えています。どうしてもファイルサイズが大きくなってしまうページなどに活用してみてはいかがでしょう。

 

 

詳細は以下から。

 

 

 

待ち時間が楽しくなる、CSSコピペで実装できるローディングアニメーションまとめ

 

#22 – Loader with Pure CSS

動きに合わせて、背景のグラデーションカラーが美しく変化するローディングアニメーション。

See the Pen #22 – Loader with pure CSS by Bojan Krsmanovic (@bojankrsmanovic) on CodePen.

 

 

 

Loading Micro Animation

読み込みに合わせて瓶に液体が注がれる、お気に入りローディングアニメーションのひとつ。

See the Pen Loading Micro Animation by Mohan Khadka (@khadkamhn) on CodePen.

 

 

 

Single Element Slack Loader

Slack アプリロゴにCSSアニメーションを追加しています。

See the Pen Single element Slack loader by CrocoDillon (@CrocoDillon) on CodePen.

 

 

 

Loader a Day (day 11)

CSSのみで制作されているとは思えないほど滑らかで、思わず見入ってしまいます。

See the Pen Loader a Day (day 11) by Reinier Kaper (@TheDutchCoder) on CodePen.

 

 

 

Loader a Day (day 2)

モバイルからタブレット、デスクトップへと変化していくアニメーション。

See the Pen Loader a Day (day 2) by Reinier Kaper (@TheDutchCoder) on CodePen.

 

 

 

Loader a Day (day 6)

transformプロパティをうまく利用することで、JS顔負けの滑らかさを実現しています。

See the Pen Loader a Day (day 6) by Reinier Kaper (@TheDutchCoder) on CodePen.

 

 

 

Loader a Day (day 15)

複数のボックスが上から落ちてくるようなエフェクトがユニーク。

See the Pen Loader a Day (day 15) by Reinier Kaper (@TheDutchCoder) on CodePen.

 

 

 

Loader a Day (day 17)

See the Pen Loader a Day (day 17) by Reinier Kaper (@TheDutchCoder) on CodePen.

 

 

 

Rainbow Rotating Dots

レインボーカラーで展開されるドット型アニメーション。

See the Pen Rainbow Rotating Dots by Nick Sheffield (@nicksheffield) on CodePen.

 

 

 

Border Loading Indicators

まるで立体的に影が当たっている様なユニークなアニメーションが特長です。

See the Pen Border loading indicators by Oliver Kühn (@0x04) on CodePen.

 

 

 

CSS3 Loading Animations

CSSのみでデザインされた、シンプルで実践にも活用しやすい素材。

See the Pen CSS3 Loading animations by Manoz (@Manoz) on CodePen.

 

 

 

SVG Loading Icons

SVGアイコンを利用したローディングアニメーションで、シンプルな実装で豊富な種類が揃います。

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

 

 

 

Wavy Loading Animations

波型ウェーブをCSSのみで再現した、滑らかな動きがポイント。

See the Pen Wavy Loading Animations by Kyle Brumm (@kjbrum) on CodePen.

 

 

 

CSS Loading Animation

左右にユラユラと揺れる、カラフルな玉を利用したローディングアニメーション。

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

 

 

 

Hand Animation – Loading

待ちぼうけを食っている状態を、指の滑らかなアニメーションで再現しています。

See the Pen Hand animation – loading by r4ms3s (@r4ms3s) on CodePen.

 

 

 

Battlefield 3 Loading Indicator

ゲームの読み込み画面をそのまま完全再現し、テキストを変更することで自由に利用できます。

See the Pen Battlefield 3 Loading Indicator by Gareth Weaver (@garethdweaver) on CodePen.

 

 

 

Loading

文字テキストが左から右へと流れるアニメーションが素敵です。

See the Pen Loading by dissimulate (@dissimulate) on CodePen.

 

 

 

Loading

四角い箱の柔らかさを表現したシンプルなローディングアニメーション。

See the Pen Loading by Dicson (@dicson) on CodePen.

 

 

 

Just Another Loader

文字テキストがくるりと回転するローディング用アニメーション。

See the Pen Just another loader by Sara (@saraoswald) on CodePen.

 

 

 

CSS Preloader

まるで生き物のようなスムーズな動きは、待ち時間のあいだもたのしませてくれます。

See the Pen CSS preloader by Indrek Paas (@indrekpaas) on CodePen.

 

 

 

DNA Animation

らせん状のDNA構造をCSSのみで表現した作品。

See the Pen DNA Animation by Ghost (@ghost028) on CodePen.

 

 

 

Project Deadline

迫ってくる締切りを、ユニークなイラストアニメーションで再現しています。

See the Pen #2 – Project Deadline – SVG animation with CSS3 by Jonathan Silva (@jonathansilva) on CodePen.

 

 

 

Elegant Seagulls’ 10-Year Celebration Badge

某ブランドの10周年を記念したローディングデザイン。

See the Pen Elegant Seagulls’ 10-Year Celebration Badge Site Loader Animation by Ryan LaBar (@ryan_labar) on CodePen.

 

 

 

CSS3 Spinners

こちらもCSSのみでデザインされた、あまり他では見かけないユニークなアニメーション。

See the Pen Css3 Spinners by Massimiliano Ranauro (@huckbit) on CodePen.

 

 

 

Logo Loader

おなじみのAdobeロゴをモチーフにしたローディングアニメーション。

See the Pen Logo Loader by PicturElements (@PicturElements) on CodePen.

 

 

 

Samsung TV Loader

実際に利用されているローディングアニメーションをHTML/CSSのみで再現しています。

See the Pen Samsung TV Loader by Joe Harry (@woodwork) on CodePen.

 

 

 

Two Minimal Loaders

細いライン線のみで表現した、ミニマルスタイルのローディングアニメーション。

See the Pen Two Minimal Loaders by Dronca Raul (@rauldronca) on CodePen.

 

 

 

Preloaders – Styled & Animated with Pure CSS

ウェブの可能性を感じる、CSSのみで制作されたローディング6種。

See the Pen Preloaders – styled & animated with pure CSS by Yinxi Chen (@kaylolo) on CodePen.

 

 

 

Lineard Spinneards

不思議な動きでじっと見てしまうローディングアニメーションが揃います。

See the Pen Lineard Spinneards by Goran Rakic (@golle404) on CodePen.

 

 

 

Loading…

See the Pen Loading… by Rik Schennink (@rikschennink) on CodePen.

 

 

 

Wave Loader

ウネウネと波打つ、グラデーションを使ったライン型エフェクト。

See the Pen Wave loader by Johan Fagerbeg (@birjolaxew) on CodePen.

 

 

 

Cross CSS Loop 1

風力発電を連想させる、クルクルと回るローディングアニメーション。

See the Pen Cross Css loop 1 by Irem Lopsum (@iremlopsum) on CodePen.

 

 

 

Ironing

アイロンを掛けている様子を表現した、クリーニング店などのサイトデザインにいかがでしょう。

See the Pen ironing by Pawel (@pawelqcm) on CodePen.

 

 

 

SVG Car Drift Loader

車がドリフト走行している様子を読み込み画面に活用しているサンプル例。

See the Pen SVG Car Drift Loader by Chris Gannon (@chrisgannon) on CodePen.

 

 

 

Code Loader

See the Pen Code Loader by Andrey Shchekin (@ashmind) on CodePen.

 

 

 

Rubik Loader

ルービックキューブを連想させる動きが面白く、いつ揃うのかと思わず見てしまいます。

See the Pen Rubik loader by Filip Vitas (@FilipVitas) on CodePen.

 

 

 

Corange Loading Screen

読み込み状況を細かく分けることで、進捗状況をより分かりやすく伝えることができます。

See the Pen Corange Loading Screen by George Hoqqanen (@hoqqanen) on CodePen.

 

 

 

Bookshelf Loader

棚に並べた本がパタパタと倒れるアニメーション。

See the Pen #Codevember – Day 6 – Bookshelf loader by Grélard Antoine (@ikoshowa) on CodePen.

 

 

 

Text Spinners

記号や特殊文字を使って、ローディングアニメーションを作成できるCSSライブラリも公開されていました。

text-spinner