CSSだけで実装するクリエイティブなローディングアニメーション20選

CSSを使って実装するローディングアニメーションを紹介します。以前はGIFアニメーションを使うことが多かったのですが、最近はCSSアニメーションで実装することが増えてきました。CSSでローディングアニメーションを実装する事で、細かな調整が簡単にできるようになりました。また、SVGを組み合わせることで、表現の幅も広がります。

CSSだけで実装するローディングアニメーション20選

1. SVG Loaders

SVG Loaders
SVG Loaders | デモ | 紹介

SVGを使ったローディングアニメーションです。12種類のローディングエフェクトが用意されています。SVGを使った美しい表現が特徴です。

2. CSS Spinners

CSS Spinners
CSS Spinners

CSSライブラリを使って実装するローディングアニメーションです。全19種類のアニメーションが用意されています。どれもオリジナリティのある表現で、デザインアクセントとして使えます。

3. Loaders.css

Loaders.css
Loaders.css | デモ | 解説

CSSだけで実装できる28種類のローディングアニメーションのライブラリです。ライブラリとして公開されているので、実装も簡単です。

4. SpinKit

SpinKit
SpinKit | デモ

11種類のローディングアニメーションが用意されています。デモページ上部にある「Source」ボタンからコードを表示することができます。

5. CSS3 Essentials for Creating Pre-loaders

CSS3 Essentials for Creating Pre-loaders
Creating a Collection of CSS3 Animated Pre-loaders

全部で6種類のローディングアニメーションの実装方法が紹介されています。HTMLとCSSコードのコピペで実装することが可能です。

6. CSS3 Loading Animation

CSS3 Loading Animation
CSS3 Loading Animation

2つのオブジェクトが重なりながら左右に移動するローディングアニメーションです。シンプルなのでミニマルなデザインにもよく合います。

7. CSS3 Loading Animation

CSS3 Loading Animation
CSS3 Loading Animation

丸いボール型のオブジェクトがウェーブのように動くローディングアニメーションです。動く際に丸が少し潰れたような表現まで細かく再現されており、シズル感があります。

8. Pure CSS Loader – Square – Single element

Pure CSS Loader - Square - Single element
Pure CSS Loader – Square – Single element

9つの正方形のオブジェクトが積み重なって、大きな正方形を作るローディングアニメーションです。最後の正方形の色が他の正方形とは異なっており、アクセントになっています。

9. Loading animation with CSS

Loading animation with CSS
Loading animation with CSS

文字に少しずつ色がついていくような表現のローディングアニメーションです。文字は普通のHTMLテキストなので、任意のものに簡単に変更することができます。

10. Fade Loading

Fade Loading
Fade Loading

クールなローディングアニメーションです。液体の中から文字が浮かび上がるような、スムーズな動作が特徴です。

11. Creative CSS Loading Animations

Creative CSS Loading Animations
Creative CSS Loading Animations | デモ

CSSで実装する5種類のクリエイティブなローディングアニメーションです。オリジナリティのあるローディングアニメーションを実装することができます。

12. Rotating Circle

Rotating Circle
Rotating Circle

ドットの集合が円をつくる、独創的な動きのローディングアニメーションです。

13. CSS3 Loading Animation

CSS3 Loading Animation
CSS3 Loading Animation

縦のラインがウェーブのように波打つCSSローディングアニメーションです。

14. Border loading indicators

Border loading indicators

CSSでBorderを使って表現するローディングアニメーションです。6種類のアニメーションが用意されています。

15. Single Element CSS Spinners

Single Element CSS Spinners
Single Element CSS Spinners | デモ

シンプルなコードで実装する8種類のCSSローディングアニメーションです。デモページで、それぞれのアニメーションの下にある「View Source」からコードを見ることができます。

16. Single Element Spinner

Single Element Spinner
Single Element Spinner

ラインが回転する、シンプルなローディングアニメーションです。6種類のパターンが用意されています。

17. Text Spinners

Text Spinners
Text Spinners | デモ | 解説

CSSだけで30種類のローディングアニメーションを実装することができるライブラリです。ドットやラインを使ったベーシックなものから、猿や人のUnicode Emojiを使った変わり種まで幅広いアニメーションが用意されています。

18. CSS3 Loading Animation Loop

CSS3 Loading Animation Loop
CSS3 Loading Animation Loop | デモ

CSSで実装する3種類のローディングアニメーションです。クリクルと回る光の輪が印象的です。

19. Loading Icon

Loading Icon
Loading Icon

4つの三日月型のオブジェクトが回るCSSローディングアニメーションです。

20. Pure CSS Loader Ring of Light

Pure CSS Loader Ring of Light
Pure CSS Loader Ring of Light

CSSだけで作られた、光のリングが回るローディングアニメーションです。