CSS到SVG加载程序图像

我试图在SVG中复制这一优秀的特性。这是我能走多远。我遇到的困难是SVG似乎被设计成在矩形（x，y）坐标系下工作。我想知道是否有办法使用径向坐标（r，θ）？如果有人能为我指明正确的方向，我将不胜感激。使用SVG是解决这个问题的方法吗

所需加载程序屏幕截图：

我当前的进度截图：

---

这可能不是您想要的，但它可能提供了一个起点，并可能帮助您使加载程序正常工作

使用JavaScript可以构建SVG并避免重复：

<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>

更新：下面是另一个使用相同组件的组件。这一个还可以在旋转时为颜色设置动画。
可能包括您用来创建它的功能：）这很酷。谢谢你的意见。你是怎么弄到的？听起来像是你用JS和模板画出来的？@Zachsauier我实际上是手工输入的：）@helderdarocha更好！我想你是按照你的措辞做的answer@ZachSaucier对事实上，我建议JavaScript不要像我那样键入所有内容。你也可以用CSS响应地这样做，特别是使用像SASS或更少的预处理器。您可以使用旋转定位，然后对其进行平移，然后设置变换原点和比例以及更改不透明性原始作者使用SASS。不过，我认为使用SVG可能更有效。我觉得没有必要添加一堆DOM元素。一个元素现在可以解决所有问题。只需注意这是可能的（：