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

Author: Benjelloun Naim

With our dedication to bringing effective and distinctive communication from brands to consumers, we consistently set our goals high to deliver high quality comprehensive digital solutions to our clients.

Leave a Reply

Your email address will not be published. Required fields are marked *