Edge Logo - animation - SCSS

by Lio Fleishman

HTML

<div class="loader loader--style4" title="3">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="120px" height="100px" viewBox="0 0 24 24" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <rect x="0" y="0" width="5" height="7" id="re1" class="recout">
      <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1" begin="0s" dur="1s" repeatCount="indefinite" />
    </rect>

    <rect x="10" y="0" width="5" height="7">
      <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1" begin="0.2s" dur="1s" repeatCount="indefinite" />
    </rect>
    <rect x="20" y="0" width="5" height="7" id="re3" class="recout">
      <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1" begin="0.3" dur="1s" repeatCount="indefinite" />
    </rect>
  </svg>
</div>

SCSS

.loader--style4 {
  position: absolute;
  transform: rotate(-90deg);
  rect {
    fill: #0875bf;
  }
	.recout {
		y:7%;
	}
}