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

  • 画像や JavaScript を使わずに、CSS だけでシンプルにローディングアニメーションを表示させる方法です。
  • HTML ソースと、CSS ソースをページ内に表示しましたので、コピーしてお使いください。
《 Type 1 》
HTML ソース  Copy HTMLソース
<div class="loading"><svg version="1.2" height="190" width="600" xmlns="http://www.w3.org/2000/svg"
viewport="0 0 60 60" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="pulsar" stroke="rgba(0,155,155,1)" fill="none" stroke-width="1"stroke-linejoin="round" d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210" /></svg></div>
CSS ソース  Copy CSSソース
 
CodePenで表示

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

Last updated : 2020/02/16