<svg version="1.1" id="preloader" x="0px" y="0px" width="240px" height="120px" viewBox="0 0 240 120">

<style type="text/css" >
	<![CDATA[

		#plug,
		#socket { fill:#FDB515 }

		#loop-normal { fill: none; stroke: #FDB515; stroke-width: 12 }
		#loop-offset { display: none }

	]]>
</style>

<path id="loop-normal" class="st1" d="M120.5,60.5L146.48,87.02c14.64,14.64,38.39,14.65,53.03,0s14.64-38.39,0-53.03s-38.39-14.65-53.03,0L120.5,60.5
L94.52,87.02c-14.64,14.64-38.39,14.64-53.03,0c-14.64-14.64-14.64-38.39,0-53.03c14.65-14.64,38.39-14.65,53.03,0z">
	<animate attributeName="stroke-dasharray" attributeType="XML"
    	from="500, 50"  to="450 50"
    	begin="0s" dur="2s"
    	repeatCount="indefinite"/>
	<animate attributeName="stroke-dashoffset" attributeType="XML"
    	from="-40"  to="-540"
    	begin="0s" dur="2s"
    	repeatCount="indefinite"/>  
</path>
  
<path id="loop-offset" d="M146.48,87.02c14.64,14.64,38.39,14.65,53.03,0s14.64-38.39,0-53.03s-38.39-14.65-53.03,0L120.5,60.5
L94.52,87.02c-14.64,14.64-38.39,14.64-53.03,0c-14.64-14.64-14.64-38.39,0-53.03c14.65-14.64,38.39-14.65,53.03,0L120.5,60.5
L146.48,87.02z"/>
  
<path id="socket" d="M7.5,0c0,8.28-6.72,15-15,15l0-30C0.78-15,7.5-8.28,7.5,0z"/>  
  
<path id="plug" d="M0,9l15,0l0-5H0v-8.5l15,0l0-5H0V-15c-8.29,0-15,6.71-15,15c0,8.28,6.71,15,15,15V9z"/>
  
<animateMotion
	xlink:href="#plug"
  	dur="2s"
	rotate="auto"
	repeatCount="indefinite"
	calcMode="linear"
	keyTimes="0;1"    
	keySplines="0.42, 0, 0.58, 1">
	<mpath xlink:href="#loop-normal"/>
</animateMotion>
  
<animateMotion             
	xlink:href="#socket"
  	dur="2s"
	rotate="auto"
	repeatCount="indefinite"
	calcMode="linear"
	keyTimes="0;1"
	keySplines="0.42, 0, 0.58, 1">
	<mpath xlink:href="#loop-offset"/>
</animateMotion>  
</svg>
<div class="credit">
  <a href="https://thenounproject.com/search/?q=energy&i=2064" target="_blank">Original Sustainable Energy Icon by Iconathon</a>
</div>
html, body { 
  width: 100%; 
  height: 100%;
  margin: 0; 
  padding: 0;
  background: #f05a30;
}

svg {
  position: absolute;
  width: 240px;
  height: 120px;
  top: 0; right: 0;
  bottom: 0; left: 0; 
  margin: auto;
}
.credit {
  position: absolute;
  bottom: 50px;
  width: 100%;
  text-align: center;
}

.credit a {
  color: #FDB515;
  font: 800 75% "Open Sans", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.