GIFアニメーションを使用せずにloadingのアニメーションを実現する方法

JSの読み込みや大きなサイズの画像の読み込みの際に一時的に表示するローディングのアニメーションですが、昔はGIFアニメーションを使用していました。
しかしGiFアニメーションでは背景に制限があったり、透過にすると縁が汚くなるといった弊害があります。

今回はPNG画像とCSS仕様したローディングアニメーションを紹介します。
ソースコードは以下の通りです。

See the Pen loading by tetsuro (@tetsuro) on CodePen.

5行目の1sの部分を調整すると回転の速さを調整することができます。
10行目の360degを-360degに変更すると回転方向が逆になります。

参考にしてください。