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

  • 画像や JavaScript を使わずに、CSS だけでシンプルにローディングアニメーションを表示させる方法です。
  • HTML ソースと、CSS ソースをページ内に表示しましたので、コピーしてお使いください。
  • 色を変えることができます。CSS の「 background-color:」で、ボディカラーなどに合わせて適切な色を設定してください。
  • 大きさを変えることもできます。ドットのバランスなどもありますので、CSS の「width:」と「 height:」で工夫してみてください。
  • 「.spinner」のサイズを小さくして、縦長の効果を得ることもできます。
  • ・この例では、ドットの 18px に対して、表示幅も同じ 18px に設定しています。
《 Type 1 》
HTML ソース  Copy HTMLソース
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
CSS ソース  Copy CSSソース
 
GitHubで表示

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

Last updated : 2022/11/23