SVG Spinning Circle (gradient)

by jorgeluis

HTML

<svg style="width: 70px; height: 70px;">
  <circle cx="50%" cy="50%" r="30" fill="none" stroke-width="4" stroke="url(#gradient)"/>
  <linearGradient id="gradient">
    <stop offset="5%" stop-color="violet" stop-opacity="1"/>
    <stop offset="100%" stop-color="cyan" stop-opacity="0"/>
  </linearGradient>
  <animateTransform attributeType="xml"
                    attributeName="transform"
                    type="rotate"
                    from="0 0 0"
                    to="360 0 0"
                    dur="0.6s"
                    repeatCount="indefinite"/>
</svg>