CSSで実装されたローディング・スピナーのアニメーションのまとめ

シンプルなローディングのアニメーションから、複雑で楽しいローディングのアニメーションまで、CSSで実装されたローディングアニメーションを紹介します。
ほとんどが外部ファイルとclassを加えるだけの簡単実装で、いざという時用にブックマークしておきたいものばかりです。

下記の回転しながら整列するアニメーションもCSSのみで実装されています。

Rotating Circle

Three Dots
Three Dots -GitHub

div要素一つにclassを与えるだけのドットで構成されたシンプルなローディングアニメーション。ドットのサイズやカラーも簡単に変更できます。

Epic Spinners
Epic Spinners -GitHub

HTML+CSSのみでも、Vue.jsのコンポーネントとしても実装できるローディングアニメーション。シンプルなデザインながら、複雑な動きが楽しめます。

Loaders
Loaders -GitHub

パフォーマンス重視の楽しいアニメーションが多く揃ったローディングアニメーション。Vue.js, React, Angularなどにも移植されています。

Single Element CSS Spinners
Single Element CSS Spinners -GitHub

スクリーンリーダー用のテキスト（Loading...）をdiv要素で内包して実装されたローディングアニメーション。div一つなのに、かなり複雑なアニメーションです。ローダーにはpx単位のフォントサイズが与えられいるので、font-sizeを変更するだけでローダーのサイズを変更できます。

SpinKit
SpinKit -GitHub

div要素一つだけで、移動や不透明度などのアニメーションで複雑な動きを再現したローディングアニメーション。Sassファイルも用意されており、カスタマイズも簡単です。

Spinners
Spinners -GitHub

CSSと最小限のHTMLで実装されたシンプルなローディングアニメーション。Sassファイルも用意されており、カスタマイズも簡単です。

Loading.css

好きな画像にローディング用のアニメーションを適用するスタイルシート。ローディングだけでなく、ボタンなどに利用してもOKです。

Spinners & Page Loaders Pure CSS

一つひとつがかなり面白い動きをするローディングアニメーション。その分HTMLも複数の要素で実装されています。

Pure CSS Animated circular dot preloaders

ドットが円に沿って動くローディングアニメーション。数や動きが異なるさまざまなパターンが用意されており、楽しめます。

Text Spinners
Text Spinners -GitHub

テキストで実装されたローディングアニメーション。テキストなのでインライン要素として配置できます。

SVG Loaders
SVG Loaders -GitHub

最後は、SVGのローディングアニメーション。SVGファイルなので、カラーやサイズはHTMLで簡単にカスタマイズできます。