SVG for Loading indicator

Make use of SVG to draw a moving "please wait" indicator

by AndreaLigios

HTML

<img src="http://placekitten.com/200/300" />  

<svg style="position:absolute;left:75px;">
  <g opacity="0.5">

<radialGradient id="g345" cx="50%" cy="50%" r="50%">
  <stop stop-color="#FFFFFF" offset="0"/>
  <stop stop-color="#0000FF" offset="1"/>
</radialGradient>

<path id="path1" d="M100 100 A 50,30 0 1,1 200,100 A 50,30 0 1,1 100,100 z" fill="none" />

  <circle cx="-20" cy="0" r="15" fill="url(#g345)">
    <animateMotion dur="2s" repeatCount="indefinite" >
      <mpath xlink:href="#path1" />
    </animateMotion>
  </circle>

  <circle cx="-20" cy="0" r="14" fill="url(#g345)">
    <animateMotion dur="2s" repeatCount="indefinite" begin="0.25s"  >
      <mpath xlink:href="#path1" />
    </animateMotion>
  </circle>

  <circle cx="-20" cy="0" r="13" fill="url(#g345)">
    <animateMotion dur="2s" repeatCount="indefinite" begin="0.5s"  >
      <mpath xlink:href="#path1" />
    </animateMotion>
  </circle>

  <circle cx="-20" cy="0" r="12" fill="url(#g345)">
    <animateMotion dur="2s" repeatCount="indefinite" begin="0.75s"  >
      <mpath xlink:href="#path1" />
    </animateMotion>
  </circle>

  <circle cx="-20" cy="0" r="11" fill="url(#g345)">
    <animateMotion dur="2s" repeatCount="indefinite" begin="1.00s"  >
      <mpath xlink:href="#path1" />
    </animateMotion>
  </circle>
  
   <circle cx="-20" cy="0" r="10" fill="url(#g345)">
    <animateMotion dur="2s" repeatCount="indefinite" begin="1.25s"  >
      <mpath xlink:href="#path1" />
    </animateMotion>
  </circle>

</g>
</svg>