🧭 目的・スタイルで探せる、おしゃれフォント図鑑が登場!【いますぐ見る】

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

loading-animation-top

 

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

 

 

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

 

 

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

 

 

詳細は以下から。

 

 

 

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

 

#22 – Loader with Pure CSS

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

 

 

 

Loading Micro Animation

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

 

 

 

Single Element Slack Loader

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

 

 

 

Loader a Day (day 11)

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

 

 

 

Loader a Day (day 2)

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

 

 

 

Loader a Day (day 6)

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

 

 

 

Loader a Day (day 15)

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

 

 

 

Loader a Day (day 17)

 

 

 

Rainbow Rotating Dots

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

 

 

 

Border Loading Indicators

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

 

 

 

CSS3 Loading Animations

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

 

 

 

SVG Loading Icons

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

 

 

 

Wavy Loading Animations

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

 

 

 

CSS Loading Animation

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

 

 

 

Hand Animation – Loading

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

 

 

 

Battlefield 3 Loading Indicator

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

 

 

 

Loading

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

 

 

 

Loading

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

 

 

 

Just Another Loader

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

 

 

 

CSS Preloader

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

 

 

 

DNA Animation

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

 

 

 

Project Deadline

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

 

 

 

Elegant Seagulls’ 10-Year Celebration Badge

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

 

 

 

CSS3 Spinners

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

 

 

 

Logo Loader

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

 

 

 

Samsung TV Loader

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

 

 

 

Two Minimal Loaders

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

 

 

 

Preloaders – Styled & Animated with Pure CSS

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

 

 

 

Lineard Spinneards

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

 

 

 

Loading…

 

 

 

Wave Loader

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

 

 

 

Cross CSS Loop 1

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

 

 

 

Ironing

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

 

 

 

SVG Car Drift Loader

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

 

 

 

Code Loader

 

 

 

Rubik Loader

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

 

 

 

Corange Loading Screen

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

 

 

 

Bookshelf Loader

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

 

 

 

Text Spinners

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

text-spinner