以前であればアニメーションGIFを用いることが多かったローディングアニメーション（プリローダー）も最近ではSVGを使ったり見栄えだけでなく動きも含めてCSSのみで実装するということも大分増えてきたので、過去に参考にさせてもらったものや覚えておきたいと思った実装方法のまとめです。
また、サンプルやチュートリアル以外に簡単にCSSやSVGを使用したローディングアニメーションを作成できるジェネレータも併せて紹介します。
April 18, 2015 追記
- 5種類追記しました。
SpinKit
CSSで実装したローディングアニメーションを全8種類紹介しており、ソースは各アニメーションのページ上部にある「Source」から確認できます。
Pure CSS Loading Spinners
回転する立方体やバウンドするボールなど全7種類。
Single Element CSS Spinners
全てHTMLはdiv要素ひとつで実装されているスピナー全8種類。
Creating a Collection of CSS3 Animated Pre-loaders
CSS3 Loading Animation Loop
Creative CSS Loading Animations
CSS3 Loading Animation
Single Element Spinner
Border loading indicators
borderを使用してローディングアニメーションを表現したもの。
Rotating Circle
CSS3 Loading Animation
Pure CSS Loader - Square - Single element
Loading Icon
Pure CSS Loader Ring of Light
Minimal Throbbers
CSS3 Loading Animation
Less Loaders
SVG Loading icons
jxnblk/loading
Loaders.css
全体的にシンプルで使いやすそうなものが全28種類まとめられており、ちょっと変わったものでパックマンがあります。
30 CSS Page Preload Animations
「Square」「Round」「Various」と大きく3つのタイプでカテゴリー分けされている全30種類のプリローダーで、全体的に他では見ない変わったタイプのものが多めです。
CSS spinners
いずれもサークルエレメントを用いたタイプのプリローダーで全20種類あります。
CSS-spinners
他では見かけない全7種類のプリローダーがあります。
Pure CSS Loaders kit
こちらも珍しいタイプのプリローダーが全12種類まとめられており、バッテリーやコーヒーカップなどいずれも他では見かけないユニークなものとなっています。
Loaders Loading!
こちらはCodePenで公開されているローディングアニメーションをまとめているもので、上では紹介していないテキストやプログレスバーを使用したタイプもあります。
ジェネレーター
以下はそれぞれCSSやSVGを使用して実装するローディングアニメーションを作成できるジェネレーターで、ベースを選んでカラー・大きさ・スピードなどを自分好みに変更するだけで簡単に作成することができます。
CSS Load.net - Loading CSS spinners and bars generator for AJAX & JQuery
loading.io - Your SVG Ajax Loading Icons
