<div id="loading">
  <div class="fol">
    <div class="cir" id="c1"></div>
    <div class="cir" id="c2"></div>
    <div class="cir" id="c3"></div>
    <div class="cir" id="c4"></div>
  </div>
</div>

@import "lesshat";

@import url("http://www.jotform.com/sharedStyles/helper.less");

html { min-height: 100%; }
body, html { height: 100%; }

* { .border-box; }

body { position: relative; background: #25AD6C; }

#loading { .square(60px); .transition(all,0.3s,ease-out); position: absolute; top: 49%; left: 50%; z-index: 3; }


.fol { .square(60px); .round(50%); top: 14px; left: 14px; position: relative;  margin: -14px 0 0 -14px; }
.cir { .square(12px); .round(50%); position: absolute; background: rgba(0,0,0,0.25); top: 30px; left: 60px; }

.anim(@d) {
	-webkit-animation: move @d infinite; 
	-moz-animation:    move @d infinite; 
	-o-animation:      move @d infinite; 
	animation:         move @d infinite;
	-webkit-animation-timing-function: linear;
}

#c1 { .anim(0.6s); }
#c2 { .anim(0.8s); }
#c3 { .anim(1.2s); }
#c4 { .anim(2.4s); }

.st(@a,@r:24px) { top: (1-sin(@a))*@r; left: (1+cos(@a))*@r; }

@-webkit-keyframes move {
  0%   { .st(0); }
  10%  { .st(pi()/5); }
  20%  { .st(2*pi()/5); }
  30%  { .st(3*pi()/5); }
  40%  { .st(4*pi()/5); }
  50%  { .st(pi()); }
  60%  { .st(6*pi()/5); }
  70%  { .st(7*pi()/5); }
  80%  { .st(8*pi()/5); }
  90%  { .st(9*pi()/5); }
  100% { .st(0); }
}