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

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

<div class="loader"><div class="loading_text">お待ちくだされ...</div><span></span><span></span><span></span></div>

CSS ソース  Copy CSSソース
 
CodePenで表示

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

Last updated : 2020/02/16