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

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

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

《 Type 1 》

■ HTML ソース Copy HTMLソース

<div class="sk-folding-cube">
<div class="sk-cube1 sk-cube"></div>
<div class="sk-cube2 sk-cube"></div>
<div class="sk-cube4 sk-cube"></div>
<div class="sk-cube3 sk-cube"></div>
</div>

■ CSS ソース Copy CSSソース

■ GitHubで表示

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

Last updated : 2022/11/23