CSS だけで作るローディング画像 ⑦
= Type 5 =
= 画像ファイルを用意する必要がありません =
  • 画像や JavaScript を使わずに、CSS だけでシンプルにローディングアニメーションを表示させる方法です。
  • HTML ソースと、CSS ソースをページ内に表示しましたので、コピーしてお使いください。
  • 色を変えることができます。CSS の「 color:」や「border」などの部分を、ボディカラーなどに合わせて適切な色を設定してください。
  • 大きさを変えることもできます。CSS の「width:」と「 height:」が基本ですが、複雑なタイプもありますので工夫をしてください。
《 Type 5 》
「お待ちくだされ...」の文字は、「LOADING...」など任意の文字を表示させることができます。また、文字を表示させないこともできます。
「<p class='loading-text'>お待ちくだされ...</p>」の部分を別の文字にするか、この部分を全て削除するかしてください。

お待ちくだされ...

■ HTML ソース  Copy HTMLソース
<div class='loading-page'><div class="loading-wrap"><div class="loading-card"><div class='ball'></div><div class='loading-board board1'></div><div class='loading-board board2'></div><div class='loading-board board3'></div></div><p class='loading-text'>お待ちくだされ...</p></div></div>
■ CSS ソース  Copy CSSソース
 
■ CodePenで表示
CodePen  

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

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