<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); }
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.