CSSを使って実装するローディングアニメーションを紹介します。以前はGIFアニメーションを使うことが多かったのですが、最近はCSSアニメーションで実装することが増えてきました。CSSでローディングアニメーションを実装する事で、細かな調整が簡単にできるようになりました。また、SVGを組み合わせることで、表現の幅も広がります。
1. SVG Loaders
SVG Loaders | デモ | 紹介
SVGを使ったローディングアニメーションです。12種類のローディングエフェクトが用意されています。SVGを使った美しい表現が特徴です。
2. CSS Spinners
CSSライブラリを使って実装するローディングアニメーションです。全19種類のアニメーションが用意されています。どれもオリジナリティのある表現で、デザインアクセントとして使えます。
3. Loaders.css
Loaders.css | デモ | 解説
CSSだけで実装できる28種類のローディングアニメーションのライブラリです。ライブラリとして公開されているので、実装も簡単です。
4. SpinKit
11種類のローディングアニメーションが用意されています。デモページ上部にある「Source」ボタンからコードを表示することができます。
5. CSS3 Essentials for Creating Pre-loaders
Creating a Collection of CSS3 Animated Pre-loaders
全部で6種類のローディングアニメーションの実装方法が紹介されています。HTMLとCSSコードのコピペで実装することが可能です。
6. CSS3 Loading Animation
2つのオブジェクトが重なりながら左右に移動するローディングアニメーションです。シンプルなのでミニマルなデザインにもよく合います。
7. CSS3 Loading Animation
丸いボール型のオブジェクトがウェーブのように動くローディングアニメーションです。動く際に丸が少し潰れたような表現まで細かく再現されており、シズル感があります。
8. Pure CSS Loader – Square – Single element
Pure CSS Loader – Square – Single element
9つの正方形のオブジェクトが積み重なって、大きな正方形を作るローディングアニメーションです。最後の正方形の色が他の正方形とは異なっており、アクセントになっています。
9. Loading animation with CSS
文字に少しずつ色がついていくような表現のローディングアニメーションです。文字は普通のHTMLテキストなので、任意のものに簡単に変更することができます。
10. Fade Loading
クールなローディングアニメーションです。液体の中から文字が浮かび上がるような、スムーズな動作が特徴です。
11. Creative CSS Loading Animations
Creative CSS Loading Animations | デモ
CSSで実装する5種類のクリエイティブなローディングアニメーションです。オリジナリティのあるローディングアニメーションを実装することができます。
12. Rotating Circle
ドットの集合が円をつくる、独創的な動きのローディングアニメーションです。
13. CSS3 Loading Animation
縦のラインがウェーブのように波打つCSSローディングアニメーションです。
14. Border loading indicators
CSSでBorderを使って表現するローディングアニメーションです。6種類のアニメーションが用意されています。
15. Single Element CSS Spinners
Single Element CSS Spinners | デモ
シンプルなコードで実装する8種類のCSSローディングアニメーションです。デモページで、それぞれのアニメーションの下にある「View Source」からコードを見ることができます。
16. Single Element Spinner
ラインが回転する、シンプルなローディングアニメーションです。6種類のパターンが用意されています。
17. Text Spinners
Text Spinners | デモ | 解説
CSSだけで30種類のローディングアニメーションを実装することができるライブラリです。ドットやラインを使ったベーシックなものから、猿や人のUnicode Emojiを使った変わり種まで幅広いアニメーションが用意されています。
18. CSS3 Loading Animation Loop
CSS3 Loading Animation Loop | デモ
CSSで実装する3種類のローディングアニメーションです。クリクルと回る光の輪が印象的です。
19. Loading Icon
4つの三日月型のオブジェクトが回るCSSローディングアニメーションです。
20. Pure CSS Loader Ring of Light
CSSだけで作られた、光のリングが回るローディングアニメーションです。