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

  • 画像や JavaScript を使わずに、CSS だけでシンプルにローディングアニメーションを表示させる方法です。
  • HTML ソースと、CSS ソースをページ内に表示しましたので、コピーしてお使いください。
《 Type 17 》
HTML ソース  Copy HTMLソース
<span class="inner-circles-loader"></span>
CSS ソース
「/* Hides inner circles outside base circle at safari */」の下の、「 -webkit-mask-image: url(」の部分の3行は、本来、改行無しの1行です。このままのコピーで作動しない場合、設置の際に1行に戻してください。
Copy CSS
 
GitHubで表示

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

Last updated : 2020/02/16