Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
11
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

@yhatt

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

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

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

Throbber

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 要素
    • widthheight で大きさが自由自在に指定できます。
    • 視力検査のような 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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
11
Help us understand the problem. What are the problem?