css3 - CSS to SVG Loader Image -

css3 - CSS to SVG Loader Image -

i trying replicate first-class loader in svg. here how far have gotten. difficulty running svg seems designed work in rectangular (x,y) type coordinates. wonder if there way utilize radial coordinates (r, theta)? if can set me in right direction, much appreciated. using svg way go here?

desired loader screenshot:

my current progress screenshot:

this might not want, might provide starting point , may help loader working.

using javascript can build svg , avoid 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 working here: jsfiddle

update: here's jsfiddle using same component. 1 animates colors while spinning.

css css3 svg