以前であればアニメーションGIFを用いることが多かったローディングアニメーション(プリローダー)も最近ではSVGを使ったり見栄えだけでなく動きも含めてCSSのみで実装するということも大分増えてきたので、過去に参考にさせてもらったものや覚えておきたいと思った実装方法のまとめです。
また、サンプルやチュートリアル以外に簡単にCSSやSVGを使用したローディングアニメーションを作成できるジェネレータも併せて紹介します。

April 18, 2015 追記

  • 5種類追記しました。

SpinKit

SpinKit

CSSで実装したローディングアニメーションを全8種類紹介しており、ソースは各アニメーションのページ上部にある「Source」から確認できます。

CSS Spinners

CSS Spinners

様々なタイプのものが全15種類紹介されており、ソースを見たい場合は「jlong/css-spinners · GitHub」で確認できます。

Pure CSS Loading Spinners

Pure CSS Loading Spinners

回転する立方体やバウンドするボールなど全7種類。

Single Element CSS Spinners

Single Element CSS Spinners

全てHTMLはdiv要素ひとつで実装されているスピナー全8種類。

Creating a Collection of CSS3 Animated Pre-loaders

Creating a Collection of CSS3 Animated Pre-loaders

CSS3 Loading Animation Loop

CSS3 Loading Animation Loop

Creative CSS Loading Animations

Creative CSS Loading Animations

CSS3 Loading Animation

CSS3 Loading Animation

Single Element Spinner

Single Element Spinner

Border loading indicators

Border loading indicators

borderを使用してローディングアニメーションを表現したもの。

Rotating Circle

Rotating Circle

CSS3 Loading Animation

CSS3 Loading Animation

Pure CSS Loader - Square - Single element

Pure CSS Loader - Square - Single element

Loading Icon

Loading Icon

Pure CSS Loader Ring of Light

Pure CSS Loader Ring of Light

Minimal Throbbers

Minimal Throbbers

CSS3 Loading Animation

CSS3 Loading Animation

Less Loaders

Less Loaders

SVG Loading icons

SVG Loading icons

jxnblk/loading

jxnblk/loading

Loaders.css

Loaders.css

全体的にシンプルで使いやすそうなものが全28種類まとめられており、ちょっと変わったものでパックマンがあります。

30 CSS Page Preload Animations

30 CSS Page Preload Animations

「Square」「Round」「Various」と大きく3つのタイプでカテゴリー分けされている全30種類のプリローダーで、全体的に他では見ない変わったタイプのものが多めです。

CSS spinners

CSS spinners

いずれもサークルエレメントを用いたタイプのプリローダーで全20種類あります。

CSS-spinners

CSS-spinners

他では見かけない全7種類のプリローダーがあります。

Pure CSS Loaders kit

Pure CSS Loaders kit

こちらも珍しいタイプのプリローダーが全12種類まとめられており、バッテリーやコーヒーカップなどいずれも他では見かけないユニークなものとなっています。

Loaders Loading!

Loaders Loading!

こちらはCodePenで公開されているローディングアニメーションをまとめているもので、上では紹介していないテキストやプログレスバーを使用したタイプもあります。

ジェネレーター

以下はそれぞれCSSやSVGを使用して実装するローディングアニメーションを作成できるジェネレーターで、ベースを選んでカラー・大きさ・スピードなどを自分好みに変更するだけで簡単に作成することができます。

CSS Load.net - Loading CSS spinners and bars generator for AJAX & JQuery

CSS Load.net - Loading CSS spinners and bars generator for AJAX & JQuery

loading.io - Your SVG Ajax Loading Icons

loading.io - Your SVG Ajax Loading Icons