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