SVG要素で超お手軽に読み込み中アイコンを置く

• 読み込み中を示すインジゲーターアイコン (Throbber) を置きたい
• かといって画像置きたくない
• ライブラリも使いたくない
• CSSもいじりたくない

なんとも我が侭で物ぐさな人 (私) のためにこさえた、
HTMLにSVG要素をコピペするだけで超お手軽にできる読み込み中アイコン。

SVG要素

以下のHTMLをコピペするといきなり動きます。(ただしモダンブラウザに限る)

3/4円弧バージョン

<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <path d="M94,50 a44,44,0,1,1,-44,-44" stroke="#369" fill="none" stroke-width="12">
        <animateTransform attributeName="transform" type="rotate" dur="1s" from="0,50,50" to="360,50,50" repeatCount="indefinite" />
    </path>
</svg>

1/2円弧バージョン

<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <path d="M94,50 a44,44,0,0,0,-88,0" stroke="#369" fill="none" stroke-width="12">
        <animateTransform attributeName="transform" type="rotate" dur="1s" from="0,50,50" to="360,50,50" repeatCount="indefinite" />
    </path>
</svg>

実際の動作を見る

カスタマイズ

• svg 要素
  • width と height で大きさが自由自在に指定できます。
    
  • 視力検査のような GIFのThrobberは上から 100px, 50px, 32px, 16px
    　
• path 要素
  • stroke 属性 で好きな色を指定。
  • stroke-width で太さを指定。太くするとはみ出るので viewBox も上手く広げてください。
    　
• animationTransform 要素
  • dur 属性で回転速度を制御

使用用途

私は『追加のHTML要素を書く量が少ない ＆ それっぽい読み込み中アイコンができる』ので、Throbberの仮置きや、使用用途が限定されたシステムに使ってます。

もうちょっとデザインの凝ったSVG読み込み中アイコンが欲しいなら、以下などがオススメ。

SVG Loading icons
http://codepen.io/aurer/pen/jEGbA