CSS だけで作るローディング画像 ① - Ouroboros - Type 9【みんなの知識ちょっと便利帳】

CSS だけで作るローディング画像 ①
Ouroboros - Type 9
= 画像ファイルを用意する必要がありません =

ここでは、画像や JavaScript を使わずに、CSS だけでシンプルにローディングアニメーションを表示させる方法を紹介します。
HTML ソースと、CSS ソースをページ内に表示しましたので、コピーしてお使いください。
9つのタイプを、それぞれのページに色を変えて用意しました。
大きさを変えることもできます。TYPE7、8、9 の3つは、4 - 5行目の「height: 46px;　width: 46px;」の 2 か所の数値を変えるだけですが、他の 6 つは複雑なので工夫をしてみてください。

《ちょっと知識》

このアニメーションのタイトルは「Ouroboros」です。
ウロボロス (ouroboros, uroboros) は、古代の象徴の1つで、己の尾を噛んで環となったヘビもしくは竜を図案化したもの（Wikipedia）。

《 Type 9 》

■ HTML ソース Copy HTMLソース

■ CSS ソース Copy CSSソース

■ CodePen

See the Pen CSS Loader by Geoffrey Crofte (@CreativeJuiz) on CodePen.

■ クリックすると、それぞれのタイプの CSS、HTML ソースを記したページが開きます。

■ このページでは全て同色ですが、それぞれのページでは CSS で色を変えてみました。