とりあえず、SVGでよくあるローダーを作ってみたわ

とりあえず、SVGでよくあるローダーを作ってみたわ。



コードはこんな感じ。

<svg version="1.1" id="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
  <style type="text/css">
    circle {
    fill:#0054C1;
    }
  </style>
  <g id="circles">
    <circle opacity="1.0" cx="49.5" cy="10" r="8">
      <animate attributeName="opacity" begin="0s" dur="1s" from="1" to="0" repeatCount="indefinite"/>
    </circle>
    <circle opacity="0.12" cx="69.73" cy="15.256" r="8">
      <animate attributeName="opacity" begin="0.12s" dur="1s" from="1" to="0" repeatCount="indefinite"/>
    </circle>
    <circle opacity="0.2" cx="84.57" cy="29.589" r="8">
      <animate attributeName="opacity" begin="0.2s" dur="1s" from="1" to="0" repeatCount="indefinite"/>
    </circle>
    <circle opacity="0.28" cx="90" cy="49.5" r="8">
      <animate attributeName="opacity" begin="0.28s" dur="1s" from="1" to="0" repeatCount="indefinite"/>
    </circle>
    <circle opacity="0.36" cx="84.57" cy="70.186" r="8">
      <animate attributeName="opacity" begin="0.36s" dur="1s" from="1" to="0" repeatCount="indefinite"/>
    </circle>
    <circle opacity="0.44" cx="69.73" cy="84.576" r="8">
      <animate attributeName="opacity" begin="0.44s" dur="1s" from="1" to="0" repeatCount="indefinite"/>
    </circle>
    <circle opacity="0.52" cx="49.5" cy="90" r="8">
      <animate attributeName="opacity" begin="0.52s" dur="1s" from="1" to="0" repeatCount="indefinite"/>
    </circle>
    <circle opacity="0.6" cx="29.601" cy="84.576" r="8">
      <animate attributeName="opacity" begin="0.6s" dur="1s" from="1" to="0" repeatCount="indefinite"/>
    </circle>
    <circle opacity="0.68" cx="15.183" cy="69.652" r="8">
      <animate attributeName="opacity" begin="0.68s" dur="1s" from="1" to="0" repeatCount="indefinite"/>
    </circle>
    <circle opacity="0.76" cx="10" cy="49.501" r="8">
      <animate attributeName="opacity" begin="0.76s" dur="1s" from="1" to="0" repeatCount="indefinite"/>
    </circle>
    <circle opacity="0.84" cx="15.183" cy="30.32" r="8">
      <animate attributeName="opacity" begin="0.84s" dur="1s" from="1" to="0" repeatCount="indefinite"/>
    </circle>
    <circle opacity="0.92" cx="29.602" cy="15.649" r="8">
      <animate attributeName="opacity" begin="0.92s" dur="1s" from="1" to="0" repeatCount="indefinite"/>
    </circle>
  </g>
</svg>

SVGはベクターだからどんなに拡大しても画質が劣化しないし、エディターでアニメーション具合やグラフィックの見た目を変更できるのがサイコーだ。

これからもバンバン使ってゆきたいっ！