Помогите сверстать loading circle

<svg viewbox=-50,-50,100,100 style="height:100vh" fill=none stroke-width=1.3> 
  <circle r=46 stroke-dasharray="100 100" stroke=red> 
        <animateTransform attributeType="xml" attributeName="transform"  
                          type="rotate" to="360" dur="3s"  
                          repeatCount="indefinite" /> 
  </circle> 
  <circle r=37 stroke-dasharray="50 100" stroke=blue> 
        <animateTransform attributeType="xml" attributeName="transform"  
                          type="rotate" to="360" dur="4s"  
                          repeatCount="indefinite" /> 
  </circle> 
  <circle r=28 stroke-dasharray="5 10 20 30" stroke=green> 
        <animateTransform attributeType="xml" attributeName="transform"  
                          type="rotate" to="360" dur="5s"  
                          repeatCount="indefinite" /> 
  </circle> 
  <circle r=19 stroke-dasharray="5 10" stroke=magenta> 
        <animateTransform attributeType="xml" attributeName="transform"  
                          type="rotate" to="360" dur="6s"  
                          repeatCount="indefinite" /> 
  </circle> 
</svg>