CSSのみでお洒落なローディングアニメーションを作ってみる

けっこうヌルヌル動くのね。 CSS3のanimationを使って、くるくる回るローディングアニメーションを作ってみました。ただし動作確認はIE10、Firefox、Chromeのみです。
また、この記事ではCSSを使って「扇型」を作るテクニックを多用しているので、その方法が知りたい人はまずこちらの記事をチェック！ さてさて、今回ローディングアニメーションを作るにあたって使用するHTML部分は以下の通り。超シンプル！ それでは、CSS部分を変えて色々動かしてみましょう。

※ベンダープレフィックスは省略しています。実用するなら忘れずに付けるように！

Demo - 1

扇を2つ回しているだけのシンプルなアニメーションです。

Demo - 2

Demo-1の上に、擬似要素を使って白い丸を乗せてみました。線っぽくなってます。

Demo - 3

Demo-2をベースに、borderの色をグラデーション風に変えてみました。よくあるローディングアニメーションです。

Demo - 4

Demo-3の上に更に擬似要素で作った丸を載せています。ここまでくるとさすがにしつこいか。 以上、簡単なローディングアニメーションの作り方でした。

…まぁ正直GIFやjQueryを使ったほうが楽なんですが、PureCSSってのはなんとなく魅力的ですよね？