CSS를 SVG 로더 이미지

Question

SVG에서이 우수한 Loader을 복제하려고합니다. 여기 내가 얼마나 멀리 gotten 있습니다. SVG가 직사각형 (x, y) 타입 좌표로 작동하도록 설계된 것 같습니다. 방사형 좌표 (r, theta)를 사용하는 방법이 있는지 궁금합니다. 누구든지 나를 올바른 방향으로 설 수 있다면, 그것은 크게 감사 할 것입니다. SVG를 사용하는 방법은 여기에 있습니까?

원하는 로더 스크린 샷 :

나의 현재 진행 스크린 샷 :

Answer 1

이 당신이 원하는 것을 정확히 일치하지 않을 수도 있지만 그것은 출발점을 제공 할 수 있으며 도움이 될 수 있습니다 로더가 작동하게됩니다. 당신은 SVG를 구축하고 반복을 피할 수있는 자바 스크립트를 사용하여

: JSFiddle

업데이트가 : 여기에 같은 구성 요소를 사용하여 다른 JSFiddle의

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

여기에 작업을 참조하십시오. 이것은 또한 회전하면서 색상을 움직입니다.