CSS だけで作るローディング画像 ⑦
= Type 6 =
= 画像ファイルを用意する必要がありません =
  • 画像や JavaScript を使わずに、CSS だけでシンプルにローディングアニメーションを表示させる方法です。
  • HTML ソースと、CSS ソースをページ内に表示しましたので、コピーしてお使いください。
  • 色を変えることができます。CSS の「 color:」や「border」などの部分を、ボディカラーなどに合わせて適切な色を設定してください。
  • 大きさを変えることもできます。CSS の「width:」と「 height:」が基本ですが、複雑なタイプもありますので工夫をしてください。
《 Type 6 》
■ HTML ソース  Copy HTMLソース
<div class="wrapper-loading06"><div class="tube"><div class="line1"></div><div class="line2"></div><div class="line3"></div><div class="colored-tube"></div><div class="bubbles" id="b1"></div><div class="bubbles" id="b2"></div><div class="bubbles" id="b3"></div><div class="bubbles" id="b4"></div><div class="bubbles" id="b5"></div><div class="solution-ck"><div class="ck1 wobble"></div><div class="ck2 wobble"></div><div class="ck3 wobble"></div><div class="ck4 wobble"></div><div class="ck5 wobble"></div></div><div class="tube-cover"></div></div></div>
■ CSS ソース  Copy CSSソース
 
■ CodePenで表示
CodePen  

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

Last updated : 2022/11/23
© みんなの知識 ちょっと便利帳 -