loading without gradient

index.html

		<svg id="loading" viewbox="0 0 100 80"> <!-- 100 x 80 viewport because we are missing the bottom center rectangle -->
			<!-- (100 / sqrt(2 * 30^2)) == 0.707. Used pythagorean principle to scale the rectangles to fit within a 100x100 viewport -->
			<g transform="translate(50 0) scale(0.707 0.707) rotate(45 0 0)">
				<rect class="rect" id="rect1" x="0" y="0" width="30" height="30" rx="2" ry="2" fill="red" />
				<rect class="rect" id="rect2" x="0" y="0" width="30" height="30" rx="2" ry="2" fill="green" />
				<rect class="rect" id="rect3" x="0" y="0" width="30" height="30" rx="2" ry="2" fill="blue" />
				<rect class="rect" id="rect4" x="0" y="0" width="30" height="30" rx="2" ry="2" fill="black" />
				<rect class="rect" id="rect5" x="0" y="0" width="30" height="30" rx="2" ry="2" fill="orange" />
				<rect class="rect" id="rect6" x="0" y="0" width="30" height="30" rx="2" ry="2" fill="teal" />
				<rect class="rect" id="rect7" x="0" y="0" width="30" height="30" rx="2" ry="2" fill="gold" />
			</g>
		</svg>

loading-without-gradient.markdown

loading without gradient

A Pen by Andreas Hjortland on CodePen.

License.

style.less

@boxWidth: 33px;
@animationDuration: 10s;
@animationStepDuration: @animationDuration / 7;

@keyframes slide {
  0% {
    transform : translate(0, 0);
  }
  2% {
    transform : translate(@boxWidth, 0);
  }

  12.5% {
    transform : translate(@boxWidth, 0);
  }
  15.5% {
    transform : translate(2*@boxWidth, 0);
  }

  25% {
    transform : translate(2*@boxWidth, 0);
  }
  27% {
    transform : translate(2*@boxWidth, @boxWidth);
  }

  37.5% {
    transform : translate(2*@boxWidth, @boxWidth);
  }
  39.5% {
    transform : translate(@boxWidth, @boxWidth);
  }

  50% {
    transform : translate(@boxWidth, @boxWidth);
  }
  52% {
    transform : translate(@boxWidth, 2*@boxWidth);
  }

  62.5% {
    transform : translate(@boxWidth, 2*@boxWidth);
  }
  64.5% {
    transform : translate(0, 2*@boxWidth);
  }

  75% {
    transform : translate(0, 2*@boxWidth);
  }
  77% {
    transform : translate(0, @boxWidth);
  }

  87.5% {
    transform : translate(0, @boxWidth);
  }
  89.5% {
    transform : translate(0, 0);
  }

  100% {
    transform : translate(0, 0);
  }
}

svg#loading {
  display : block;
  margin  : auto;
  width   : 20rem;
  height  : auto;
  //transform : rotate(180deg);
  
  .rect {
    animation : slide @animationDuration ease infinite;
  }
  #rect1 {
    animation-delay : -0 * @animationStepDuration;
  }
  #rect2 {
    animation-delay : -1 * @animationStepDuration;
  }
  #rect3 {
    animation-delay : -2 * @animationStepDuration;
  }
  #rect4 {
    animation-delay : -3 * @animationStepDuration;
  }
  #rect5 {
    animation-delay : -4 * @animationStepDuration;
  }
  #rect6 {
    animation-delay : -5 * @animationStepDuration;
  }
  #rect7 {
    animation-delay : -6 * @animationStepDuration;
  }
}