CSS to SVG Loader Image

Problem

I am trying to replicate this excellent Loader in SVG. Here is how far I have gotten. The difficulty that I am running into is that SVG seems to be designed to work in rectangular (x,y) type coordinates. I wonder if there is a way to use radial coordinates (r, theta)? If anyone can set me in the right direction, that would be much appreciated. Is using SVG the way to go here?

Desired loader screenshot:

enter image description here

My current progress screenshot:

enter image description here

Problem courtesy of: Diode Dan

Solution

This might not be exactly what you want, but it might provide a starting point and may help you get your loader working.

Using JavaScript you can build the SVG and avoid the repetition:

<div id="container">
<svg id="svg" viewBox="0 0 300 300">
   <defs>
      <rect id="r" x="50" y="-10" height="20" width="75" rx="10"/>
      <g id="g">
        <animateTransform
            attributeName="transform" begin="0s" dur="1s"
            type="rotate" 
            values="330;300;270;240;210;180;150;120;90;60;30"
            repeatCount="indefinite" 
            calcMode="discrete"
        />
        <use xlink:href="#r" opacity="1"/>
        <use xlink:href="#r" opacity=".9"  transform="rotate(30)  scale(0.95)" />
        <use xlink:href="#r" opacity=".8"  transform="rotate(60)  scale(0.9)"  />
        <use xlink:href="#r" opacity=".7"  transform="rotate(90)  scale(0.85)" />
        <use xlink:href="#r" opacity=".6"  transform="rotate(120) scale(0.8)"  />
        <use xlink:href="#r" opacity=".5"  transform="rotate(150) scale(0.75)" />
        <use xlink:href="#r" opacity=".4"  transform="rotate(180) scale(0.7) " />
        <use xlink:href="#r" opacity=".3"  transform="rotate(210) scale(0.65)" />
        <use xlink:href="#r" opacity=".2"  transform="rotate(240) scale(0.6) " />
        <use xlink:href="#r" opacity=".15" transform="rotate(270) scale(0.55)" />
        <use xlink:href="#r" opacity=".1"  transform="rotate(300) scale(0.5)"  />
        <use xlink:href="#r" opacity=".05" transform="rotate(330) scale(0.45)" />
      </g>
    </defs>
    <use id="loader" xlink:href="#g" transform="translate(150,150)"></use>
</svg>

See it working here: JSFiddle

Update: Here's another JSFiddle using the same component. This one also animates the colors while spinning.

Solution courtesy of: helderdarocha

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.