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

  • 画像や JavaScript を使わずに、CSS だけでシンプルにローディングアニメーションを表示させる方法です。
  • HTML ソースと、CSS ソースをページ内に表示しましたので、コピーしてお使いください。
  • 色を変えることができます。CSS の「 color:」や「border」などの部分を、ボディカラーなどに合わせて適切な色を設定してください。
  • 大きさを変えることもできます。CSS の「width:」と「 height:」が基本ですが、複雑なタイプもありますので工夫をしてください。
《 Type 5 - Slices 》

下のサンプルのように小さい円にする場合は、
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
が必要です。ただし、ページの設定によってはレイアウトなどに影響が出る場合があります。

HTML ソース  Copy HTMLソース
<div class="sp sp-slices"></div>
CSS ソース  Copy CSSソース
 
CodePenで表示

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

Last updated : 2022/11/23