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

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

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

《 Type 20 》

■ HTML ソース Copy HTMLソース

<div class="breeding-rhombus-spinner"><div class="rhombus child-1"></div><div class="rhombus child-2"></div><div class="rhombus child-3"></div><div class="rhombus child-4"></div><div class="rhombus child-5"></div><div class="rhombus child-6"></div><div class="rhombus child-7"></div><div class="rhombus child-8"></div><div class="rhombus big"></div></div>

■ CSS ソース Copy CSSソース

■ GitHubで表示

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

Last updated : 2024/06/30