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

  • ここでは、画像や JavaScript を使わずに、CSS だけでシンプルにローディングアニメーションを表示させる方法を紹介します。
  • HTML ソースと、CSS ソースをページ内に表示しましたので、コピーしてお使いください。
  • 9つのタイプを、それぞれのページに色を変えて用意しました。
  • 大きさを変えることもできます。TYPE7、8、9 の3つは、4 - 5行目の「height: 46px; width: 46px;」の 2 か所の数値を変えるだけですが、他の 6 つは複雑なので工夫をしてみてください。
  • 《ちょっと知識》
    • このアニメーションのタイトルは「Ouroboros」です。
    • ウロボロス (ouroboros, uroboros) は、古代の象徴の1つで、己の尾を噛んで環となったヘビもしくは竜を図案化したもの(Wikipedia)。
《 Type 1 》
HTML ソース  Copy HTMLソース
<span class="circle"><span class="ouro"><span class="left"><span class="anim"></span></span><span class="right"><span class="anim"></span></span></span></span>
CSS ソース  Copy CSSソース
 
CodePen

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

クリックすると、それぞれのタイプの CSS、HTML ソースを記したページが開きます。
このページでは全て同色ですが、それぞれのページでは CSS で色を変えてみました。

おすすめサイト・関連サイト…

Last updated : 2020/02/15