CSSだけで実装できる、シンプルなローディングアニメーションを5つ作ってみた

JavaScriptは使わず、CSSだけでローディングアニメーションを作ってみました。

睡魔に襲われながらゴリ押しで書いたのでコードがクソ汚いですが、しっかり書き直せば実用できる…かもしれません。

こんな感じ

ベンダープレフィックスは一切付けていないですし、動作確認はChromeとFirefoxのみです。
ソースが見たい人は右上の「EDIT ON CODEPEN」からどうぞ。

See the Pen vgzGdb by Kuzlog (@Kuzlog) on CodePen.

4番目のコードはtransform:rotate(Xdeg)で回しているんですが 、回転させる際の原点を決めるtransform-originというプロパティを組み合わせて使っています。こんなプロパティ、普通にWebサイト作ってたらほとんど使わないですよね。

他のコードはただ色を変えたり動かしたりしているだけなので、CSSのプロパティをある程度理解していればどれも簡単に作れると思います。

でも結局？

クロスブラウザに対応させるならやっぱりGIFやSVG、もしくはJSで作ったほうがいいです。CSSでの実装は手間が掛かる上にコード量も多くなるので…

ただ、簡単なCSSだけでも色々出来るんだなぁという事が皆さんに伝われば幸いです。てかPureCSSっていいよね…（ｳｯﾄﾘ）