Loading...
Concept Loading SVG and CSS animation
Concept Loading SVG and CSS animation

<svg width="100px" height="100px" >

	<circle fill="none" stroke="#F68A1F" stroke-miterlimit="10" stroke-dasharray="11.7455,11.7455" cx="50" cy="50" r="48.616" >
      <animateTransform attributeName="transform"
        attributeType="XML"
        type="rotate"
        from="0 50 50"
        to="360 50 50"
        dur="4s"
        repeatCount="indefinite" />
	</circle>	
<circle fill="#F68A1F" cx="50" cy="50" r="38.718"/>

	<rect y="-27" fill="#F68A1F" width="13.204" height="13.204"/>

	<path fill="#FFFFFF" d="M44.036,59.654c0,1.177-0.954,2.13-2.13,2.13l0,0c-1.176,0-2.13-0.953-2.13-2.13V40.327
		c0-1.176,0.954-2.13,2.13-2.13l0,0c1.176,0,2.13,0.954,2.13,2.13V59.654z">

      <animateTransform 		attributeName="transform"
      attributeType="XML"
      type="translate"
      dur="1s"
      values="0,6;0,-6;0,6"
      repeatCount="indefinite" />

	</path>

	<path fill="#FFFFFF" d="M52.225,59.654c0,1.177-0.955,2.13-2.131,2.13l0,0c-1.176,0-2.129-0.953-2.129-2.13V40.327
		c0-1.176,0.953-2.13,2.129-2.13l0,0c1.176,0,2.131,0.954,2.131,2.13V59.654z">

      <animateTransform 		attributeName="transform"
      attributeType="XML"
      type="translate"
      dur="1s"
      begin=".1"
      values="0,7;0,-7;0,7"
      repeatCount="indefinite" />

	</path>

	<path fill="#FFFFFF" d="M60.25,59.654c0,1.177-0.953,2.13-2.129,2.13l0,0c-1.176,0-2.131-0.953-2.131-2.13V40.327
		c0-1.176,0.955-2.13,2.131-2.13l0,0c1.176,0,2.129,0.954,2.129,2.13V59.654z">

      <animateTransform 		attributeName="transform"
      attributeType="XML"
      type="translate"
      begin=".2"
      dur="1s"
      values="0,8;0,-8;0,8"
      repeatCount="indefinite" />

	</path>

</svg>

See the Pen Yyyomz by Zak Chapman (@naimbic) on CodePen.

How to create SVG

How to code with SVG

The Discussion (0)
    Write a comment