43 loaders

HTML

              
                <!-- you can apply color:white in body for numbers :) -->


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg  height="200" width="200">
  <circle id="dot0" cx="50%" r="10"  fill="white" />
</svg>1
<svg  height="200" width="200">
  <circle id="dot1" cx="40%" r="7"  fill="white" />
  <circle id="dot2" cx="50%" r="7"  fill="white" />
  <circle id="dot3" cx="60%" r="7"  fill="white" />
</svg>2
<svg  height="200" width="200">
  <circle id="dot4" cx="50%" cy=50% r="5"  fill="white" />
  <circle id="dot5" cx="50%" cy=50% r="5"  fill="white" />
  <circle id="dot6" cx="50%" cy=50% r="5"  fill="white" />
</svg>3
<svg   height="200" width="200">
   <circle id="dot7" cx="50%" cy=50% r="5"  fill="white" />
   <circle id="dot8" cx="50%" cy=50% r="5"  fill="white" />
   <circle id="dot9" cx="50%" cy=50% r="5"  fill="white" />
</svg>4 
<svg  height="200" width="200">
  <circle id="dot10" cx="40%" cy=50% r="7"  fill="white" />
  <circle id="dot11" cx="50%" cy=50% r="7"  fill="white" />
  <circle id="dot12" cx="60%" cy=50% r="7"  fill="white" />
</svg>5
<svg  height="200" width="200">
  <circle id="dot13" cy="50%" r="7"  fill="white" />
  <circle id="dot14" cy="50%" r="6"  fill="white" />
  <circle id="dot15" cy="50%" r="5"  fill="white" />
</svg>6
<svg  height="200" width="200">
  <circle id="dot62" cx="55%" r="10"  fill="white" />
  <rect id="square78" x="0%" y="0%" width="20" height="5" style="fill:white" />
  <rect id="square79" x="0%" y="0%" width="20" height="5" style="fill:white" />
  <rect id="square80" x="0%" y="0%" width="20" height="5" style="fill:white" />
  <rect id="square81" x="0%" y="0%" width="20" height="5" style="fill:white" />
  <rect id="square82" x="0%" y="0%" width="20" height="5" style="fill:white" />
  <rect id="square83" x="0%" y="0%" width="20" height="5" style="fill:white" />
</svg>7
<svg  height="200" width="200">
  <circle id="dot19" cx="35%" cy="50%" r="5"  fill="white" />
  <circle id="dot20" cx="50%" cy="50%" r="5"  fill="white" />
  <circle id="dot21" cx="65%" cy="50%" r="5"  fill="white" />
</svg>8
<svg  height="200" width="200">
  <circle id="dot22" cx="43%" cy="50%" r="7"  fill="white" />
  <circle id="dot23" cx="50%" cy="50%" r="7"  fill="white" />
  <circle id="dot24" cx="57%" cy="50%" r="7"  fill="white" />
</svg>9
<div id="big">
   <div id="dot55"></div>
   <div id="dot56"></div>
   <div id="dot58"></div>
</div>
10
<svg  height="200" width="200">
  <circle id="dot59" cx="50%" cy=50% r="5"  fill="white" />
  <circle id="dot60" cx="50%" cy=50% r="5"  fill="rgba(250,250,250,0.7)" />
  <circle id="dot61" cx="50%" cy=50% r="5"  fill="rgba(250,250,250,0.5)" />
</svg>11
<svg  height="200" width="200">
    <rect id="square50" x="50%" y="50%" width="40" height="7" style="fill:white" />
    <rect id="square51" x="50%" y="50%" width="40" height="7" style="fill:white" />
    <rect id="square52" x="50%" y="50%" width="40" height="7" style="fill:white" />
    <rect id="square53" x="50%" y="50%" width="40" height="7" style="fill:white" />
    <rect id="square54" x="50%" y="50%" width="40" height="7" style="fill:white" />
</svg>12
<svg width="200" height="200">
  <rect id="square6" x="38%" y="50%" width="20" height="20" style="fill:white" />
  <rect id="square7" x="50%" y="50%" width="20" height="20" style="fill:white" />
  <rect id="square8" x="62%" y="50%" width="20" height="20" style="fill:white" />
</svg>13
<div class="box">
  <div id="square9"></div>
</div>14
<div class="box">
  <div id="square10" class="s1"></div>
  <div id="square11" class="s1"></div>
  <div id="square12" class="s1"></div>
</div>15
<svg  height="200" width="200">
  <circle id="dot27" cx="50%" cy="50%" r="20"   fill="rgba(0,0,0,0)" stroke-width="4" stroke-dasharray="90"; stroke="white"; />
  <circle id="dot28" cx="50%" cy="50%" r="30"   fill="rgba(0,0,0,0)" stroke-width="4" stroke-dasharray="90"; stroke="white"; />
  <circle id="dot29" cx="50%" cy="50%" r="40"   fill="rgba(0,0,0,0)" stroke-width="4" stroke-dasharray="90"; stroke="white"; />
</svg>16
<svg  height="200" width="200">
  <circle id="dot26" cx="50%" cy="50%" r="20"   fill="rgba(0,0,0,0)" stroke-width="4" stroke-dasharray="100"; stroke="white"; />
</svg>17
<svg width="200" height="200">
  <rect id="square24" y="50%" width="20" height="4" style="fill:white" />
</svg>18
<svg width="200" height="200">
  <rect id="square25" y="50%" width="70" height="4" style="fill:white" />
</svg>19
<svg width="200" height="200">
  <rect id="square26" x=45% y=60% width="4" height="10" style="fill:white" />
  <rect id="square27" x=50% y=60% width="4" height="10" style="fill:white" />
  <rect id="square28" x=55% y=60% width="4" height="10" style="fill:white" />
  <rect id="square29" x=60% y=60% width="4" height="10" style="fill:white" />
  <rect id="square30" x=65% y=60% width="4" height="10" style="fill:white" />
</svg>20
<div class="box2">
  <div id="square31" class="s2"></div>
  <div id="square32" class="s2"></div>
  <div id="square33" class="s2"></div>
</div>21
<svg width="200" height="200">
  <rect id="square22" y="40%" width="20" height="20" style="fill:white" />
  <rect id="square23" y="40%" width="20" height="20" style="fill:white" />
</svg>22
<svg  height="200" width="200">
  <circle id="dot30" cx="50%" cy=50% r="5"  fill="white" />
  <circle id="dot31" cx="50%" cy=50% r="5"  fill="white" />
  <circle id="dot32" cx="50%" cy=50% r="5"  fill="white" />
  <circle id="dot33" cx="50%" cy=50% r="5"  fill="white" />
  <circle id="dot34" cx="50%" cy=50% r="5"  fill="white" />
</svg>23
<svg  height="200" width="200">
  <circle id="dot35" cx="50%" cy=50% r="5"  fill="white" />
  <circle id="dot36" cx="50%" cy=50% r="5"  fill="white" />
  <circle id="dot37" cx="50%" cy=50% r="5"  fill="white" />
  <circle id="dot38" cx="50%" cy=50% r="5"  fill="white" />
  <circle id="dot39" cx="50%" cy=50% r="5"  fill="white" />
</svg>24
<svg width="200" height="200">
  <rect id="square13" x="38%" y="40%" width="20" height="20" style="fill:white" />
  <rect id="square14" x="50%" y="40%" width="20" height="20" style="fill:white" />
  <rect id="square15" x="62%" y="40%" width="20" height="20" style="fill:white" />
  <rect id="square16" x="38%" y="52%" width="20" height="20" style="fill:white" />
  <rect id="square17" x="50%" y="52%" width="20" height="20" style="fill:white" />
  <rect id="square18" x="62%" y="52%" width="20" height="20" style="fill:white" />
  <rect id="square19" x="38%" y="64%" width="20" height="20" style="fill:white" />
  <rect id="square20" x="50%" y="64%" width="20" height="20" style="fill:white" />
  <rect id="square21" x="62%" y="64%" width="20" height="20" style="fill:white" />
</svg>25
<svg width="200" height="200">
  <circle id="dot40" cx="60%" r="15"  fill="white" />
  <rect id="square34" x=50% y="50%" width="40" height="20" style="fill:white" />
</svg>26
<svg width="200" height="200">
  <circle id="dot41" cx="50%" cy="50%" r="30" fill="rgba(0,0,0,0)" stroke-width="4" stroke="white";/>
  <rect id="square35" x=50% y="50%" width="20" height="4" style="fill:white" />
</svg>27
<svg width="200" height="200">
  <rect id="square36" x="10%" y="40%" width="20" height="40" style="fill:white" />
  <rect id="square37" x="20%" y="40%" width="20" height="40" style="fill:white" />
  <rect id="square38" x="30%" y="40%" width="20" height="40" style="fill:white" />
  <rect id="square39" x="40%" y="40%" width="20" height="40" style="fill:white" />
  <rect id="square40" x="50%" y="40%" width="20" height="40" style="fill:white" />
  <rect id="square41" x="60%" y="40%" width="20" height="40" style="fill:white" />
</svg>28
<div id="box4">
  <div id="square42" ></div>
  <div id="square43" class="s1"></div>
  <div id="square44" class="s1"></div>
  <div id="dot42" ></div>
</div>29
<svg  height="200" width="200">
  <circle id="dot43" cx="50%" cy="50%" r="10"  fill="white" />
</svg>30
<svg  height="200" width="200">
  <circle id="dot44" cx="50%" cy="50%" r="5"  fill="rgba(0,0,0,0)" stroke-width="1" stroke="white"; />
</svg>31
<svg  height="200" width="200">
  <circle id="dot45" cx="50%" cy="50%" r="30"  fill="rgba(0,0,0,0)" stroke-width="10" stroke-dasharray="5"; stroke="white"; />
</svg>32
<svg  height="200" width="200">
  <rect id="square45" x="10%" y="40%" width="7" height="40" style="fill:white" />
    <rect id="square46" x="90%" y="40%" width="7" height="40" style="fill:white" />
  <circle id="dot46" cx="55%" cy="50%" r="7"  fill="white" />
</svg>33
<svg  height="200" width="200">
  <circle id="dot47" cx="50%" cy="50%" r="20" fill="rgba(0,0,0,0)" stroke-width="40" stroke-dasharray="63"; stroke="white"/>
  <circle id="dot48" cx="50%" cy="50%" r="20" fill="rgba(0,0,0,0)" stroke-width="40" stroke-dasharray="63"; stroke="white"/>
  <circle id="dot49"  cy="50%" r="7"  fill="white" />
</svg>34
<svg width="200" height="200">
  <rect id="square47" x="40%" y="0%" width="60" height="7" style="fill:#ffa700" />
  <rect id="square48" x="50%" y="40%" width="20" height="20" style="fill:white" />
  <rect id="square49" x="40%" y="97%" width="60" height="7" style="fill:#0078ff" />
</svg>35
<svg  height="200" width="200">
  <circle id="dot50" cx="50%" cy="50%" r="20"   fill="rgba(0,0,0,0)" stroke-width="4" strokeDashoffset="400" stroke-dasharray="200"; stroke="white"; />
</svg>36
<svg  height="200" width="200">
  <circle id="dot51" cx="50%" cy="50%" r="10"   fill="rgba(0,0,0,0)" stroke-width="20" stroke-dasharray="100" strokeDashoffset="400" stroke="white"; />
    <circle id="dot52" cx="50%" cy="50%" r="30"   fill="rgba(0,0,0,0)" stroke-width="4"  stroke="white"; />
</svg>
</svg>37
<svg  height="200" width="200">
  <circle id="dot53" cx="53%" cy="50%" r="30"   fill="rgba(0,0,0,0)" stroke-width="10" stroke-dasharray="3"; stroke="white"; /> 
  <circle id="dot54" cx="50%" cy="50%" r="20"   fill="rgba(0,0,0,0)" stroke-width="50" stroke-dasharray="150"; stroke="rgba(0,0,0,1)"; strokeDashoffset:"150"/>
</svg>38
<svg  height="200" width="200">
  <circle id="dot25" cx="50%" cy="50%" r="7"  fill="white" />
</svg>39

<svg width="200" height="200">
  <rect id="square1" x="40%" y="40%" width="20" height="20" style="fill:white" />
  <rect id="square2" x="52%" y="40%" width="20" height="20" style="fill:white" />
  <rect id="square3" x="40%" y="52%" width="20" height="20" style="fill:white" />
  <rect id="square4" x="52%" y="52%" width="20" height="20" style="fill:white" />
</svg>40
<svg width="200" height="200">
  <rect id="square5" x="50%" width="20" height="20" style="fill:white" />
</svg>12

<div class="box">
  <div id="square55" class="s1"></div>
  <div id="square66" class="s1"></div>
  <div id="square77" class="s1"></div>
</div>42
<svg  height="200" width="200">
  <circle id="dot16" cx="40%" cy="50%" r="7"  fill="white" />
  <circle id="dot17" cx="50%" cy="50%" r="7"  fill="white" />
  <circle id="dot18" cx="60%" cy="50%" r="7"  fill="white" />
</svg>43

CSS

              
                body{ 
  color:white;
  display:flex;
  flex-wrap: wrap;
  background-color:black;
}
#square9{
  margin: 40% 40%;
  position:absolute;
  width:20px;
  height:20px;
  background-color:white;
  transform-style:preserve-3d;
}
.s1{
  margin: 40% 40%;
  position:absolute;
  width:40px;
  height:20px;
  background-color:white;
  transform-style:preserve-3d;
}
.box{
  perspective:100px;
  width:200px;
  height:200px;
}
.s2{
  margin: 35% 35%;
  position:absolute;
  width:20px;
  height:40px;
  background-color:white;
  transform-style:preserve-3d;
}
.box2{
  perspective:100px;
  width:200px;
  height:200px;
}
#square42{
  margin: 45% 30%;
  position:absolute;
  width:100px;
  height:10px;
  background-color:white;
}
#square43{
  width:10px;
  margin-left:50px;
}
#square44{
  width:10px;
  margin-left:150px;
}
#dot42{
  position:absolute;
  width:20px;
  height:20px;
  border-radius:50%;
  background-color:white;
}
#box4{
  width:200px;
  height:200px;
}
a1{
  border: solid white;
  border-width: 0 3px 3px 0;
  padding: 3px;
  transform: rotate(-45deg);
}
#dot55{
  position:absolute;
  margin-left:100px;
  margin-top:100px;
  width:50px;
  height:50px;
  border-radius:50%;
  border-style:solid;
  border-color:grey;
  transform: rotateX(30deg) rotateY(10deg);
}
#dot56{
  position:absolute;
  margin-top:52px;
  margin-left:100px;
  width:50px;
  height:50px;
  border-radius:50%;
  border-style:solid;
  border-color:white;
  transform: rotateX(-30deg) rotateY(10deg); 
}
#dot58{
  position:absolute;
  margin-left:-1%;
    margin-left:100px;
  margin-top:100px;
  width:70px;
  height:60px;
  background-image: linear-gradient(to top,black , rgba(0,0,0,0));
  transform: rotateX(30deg) rotateY(10deg);
}
#big{
  width:200px;
  height:200px;
}
#load{
  text-allign:center;
  width:200px;
  height:200px;
}
#dot63{
  position:absolute;
  margin-top:52px;
  margin-left:100px;
  width:50px;
  height:50px;
  border-radius:50%;
  border-style:solid;
  border-color:white;
  transform: rotateX(-30deg) rotateY(10deg); 
}
#dot64{
  position:absolute;
  margin-left:-1%;
  margin-left:100px;
  margin-top:100px;
  width:70px;
  height:60px;
  background-image: linear-gradient(to top,#030d1c , rgba(0,0,0,0));
  transform: rotateX(30deg) rotateY(10deg);
}

JS

              
                let t1 = new TimelineMax({repeat: -1});
let t2 = new TimelineMax({repeat: -1});
let t3 = new TimelineMax({repeat: -1});
let t4 = new TimelineMax({repeat: -1});
let t5 = new TimelineMax({repeat: -1});
let t6 = new TimelineMax({repeat: -1});
let t7 = new TimelineMax({repeat: -1});
let t7a = new TimelineMax({repeat: -1});
let t8 = new TimelineMax({repeat: -1});
let t9 = new TimelineMax({repeat: -1});
let t10 = new TimelineMax({repeat: -1});
let t10a = new TimelineMax({repeat: -1});
let t11 = new TimelineMax({repeat: -1});
let t12 = new TimelineMax({repeat: -1});
let t13 = new TimelineMax({repeat: -1});
let t14 = new TimelineMax({repeat: -1});
let t15 = new TimelineMax({repeat: -1});
let t16 = new TimelineMax({repeat: -1});
let t17 = new TimelineMax({repeat: -1});
let t18 = new TimelineMax({repeat: -1});
let t19 = new TimelineMax({repeat: -1});
let t20 = new TimelineMax({repeat: -1});
let t21 = new TimelineMax({repeat: -1});
let t22 = new TimelineMax({repeat: -1});
let t23 = new TimelineMax({repeat: -1});
let t24 = new TimelineMax({repeat: -1});
let t25 = new TimelineMax({repeat: -1});
let t26 = new TimelineMax({repeat: -1});
let t27 = new TimelineMax({repeat: -1});
let t28 = new TimelineMax({repeat: -1});
let t29 = new TimelineMax({repeat: -1});
let t29a = new TimelineMax({repeat: -1});
let t30 = new TimelineMax({repeat: -1});
let t31 = new TimelineMax({repeat: -1});
let t32 = new TimelineMax({repeat: -1});
let t33 = new TimelineMax({repeat: -1});
let t33a = new TimelineMax({repeat: -1});
let t34 = new TimelineMax({repeat: -1});
let t34a = new TimelineMax({repeat: -1});
let t35 = new TimelineMax({repeat: -1});
let t36 = new TimelineMax({repeat: -1});
let t37 = new TimelineMax({repeat: -1});
let t38 = new TimelineMax({repeat: -1});
let t39 = new TimelineMax({repeat: -1});
let t40 = new TimelineMax({repeat: -1});
let t41 = new TimelineMax({repeat: -1});
let t42 = new TimelineMax({repeat: -1});
let t43 = new TimelineMax({repeat: -1});
let t44 = new TimelineMax({repeat: -1});
let t45 = new TimelineMax({repeat: -1});
let t46 = new TimelineMax({repeat: -1});
let t47 = new TimelineMax({repeat: -1});
let t48 = new TimelineMax({repeat: -1});
let t49 = new TimelineMax({repeat: -1});
let t50 = new TimelineMax({repeat: -1});

t1
    .fromTo($("#dot0"), 0.4, {y:90}, {y:140, ease:Power2.easeIn})
    .fromTo($("#dot0"), 0.4, {y:140},{y:90, ease:Power2.easeOut},);

t2  
    .fromTo($("#dot1"), 0.4, {y:90}, {y:140, ease:Power2.easeIn},0)
    .fromTo($("#dot1"), 0.4, {y:140},{y:90, ease:Power2.easeOut},0.4)
    .fromTo($("#dot2"), 0.4, {y:90}, {y:140, ease:Power2.easeIn},0.1) 
    .fromTo($("#dot2"), 0.4, {y:140},{y:90, ease:Power2.easeOut},0.5)
    .fromTo($("#dot3"), 0.4, {y:90}, {y:140, ease:Power2.easeIn},0.2)
    .fromTo($("#dot3"), 0.4, {y:140},{y:90, ease:Power2.easeOut},0.6); 
t3  
    .fromTo($("#dot4"), 1, {rotation:0, transformOrigin:"100% 300%"}, {rotation:360, ease:Power2.easeIn},0)
    .fromTo($("#dot5"), 1, {rotation:0, transformOrigin:"100% 300%"}, {rotation:360, ease:Power2.easeIn},0.2) 
    .fromTo($("#dot6"), 1, {rotation:0, transformOrigin:"100% 300%"}, {rotation:360, ease:Power2.easeIn},0.4);
t4
    .fromTo($("#dot7"), 0.4, {x:210},{x:10, ease:Power2.easeOut},0)
    .fromTo($("#dot7"), 0.6, {x:10}, {x:-10},0.4) 
    .fromTo($("#dot7"), 0.4, {x:-10},{x:-210, ease:Power2.easeIn},1) 
    .fromTo($("#dot8"), 0.4, {x:210},{x:10, ease:Power2.easeOut},0.5)
    .fromTo($("#dot8"), 0.6, {x:10}, {x:-10},0.9) 
    .fromTo($("#dot8"), 0.4, {x:-10},{x:-210, ease:Power2.easeIn},1.5) 
    .fromTo($("#dot9"), 0.4, {x:210},{x:10, ease:Power2.easeOut},1)
    .fromTo($("#dot9"), 0.6, {x:10}, {x:-10},1.4) 
    .fromTo($("#dot9"), 0.4, {x:-10},{x:-210, ease:Power2.easeIn},2);
t5  
    .fromTo($("#dot10"), 0.4, {autoAlpha:0},{autoAlpha:1},0)
    .fromTo($("#dot11"), 0.4, {autoAlpha:0},{autoAlpha:1},0.2)
    .fromTo($("#dot12"), 0.4, {autoAlpha:0},{autoAlpha:1},0.4)
    .to($("#dot10"), 0.4, {autoAlpha:0},0.4)
    .to($("#dot11"), 0.4, {autoAlpha:0},0.6)
    .to($("#dot12"), 0.4, {autoAlpha:0},0.8);
t6
    .fromTo($("#dot13"), 0.6, {x:60}, {x:140},0)
    .fromTo($("#dot13"), 0.6, {x:140},{x:60},0.6) 
    .fromTo($("#dot14"), 0.6, {x:60, autoAlpha:0.7}, {x:140},0.1)
    .fromTo($("#dot14"), 0.6, {x:140},{x:60},0.7) 
    .fromTo($("#dot15"), 0.6, {x:60, autoAlpha:0.5}, {x:140},0.2)
    .fromTo($("#dot15"), 0.6, {x:140},{x:60},0.8);
t7
    .fromTo($("#dot62"), 0.4, {y:20}, {y:90, ease:Power2.easeIn},0)
    .fromTo($("#dot62"), 0.4, {y:90},{y:20, ease:Power2.easeOut},)
t7a
    .fromTo($("#square78"), 0.8, {x:-40,y:-40,ease:Power0.easeNone}, {x:0,y:0,ease:Power0.easeNone},0)
    .fromTo($("#square79"), 0.8, {x:0,y:0,ease:Power0.easeNone}, {x:40,y:40,ease:Power0.easeNone},0)
    .fromTo($("#square80"), 0.8, {x:40,y:40,ease:Power0.easeNone}, {x:80,y:80,ease:Power0.easeNone},0)
    .fromTo($("#square81"), 0.8, {x:80,y:80,ease:Power0.easeNone}, {x:120,y:120,ease:Power0.easeNone},0)
    .fromTo($("#square82"), 0.8, {x:120,y:120,ease:Power0.easeNone}, {x:160,y:160,ease:Power0.easeNone},0)
    .fromTo($("#square83"), 0.8, {x:160,y:160,ease:Power0.easeNone}, {x:200,y:200,ease:Power0.easeNone},0)
t8
    .fromTo($("#dot19"), 0.5, {transformOrigin:"center", scaleX:1,scaleY:1}, {scaleX:1.5,scaleY:1.5},0)
    .fromTo($("#dot19"), 0.5, {scaleX:1.5,scaleY:1.5}, {scaleX:1,scaleY:1},0.5)
    .fromTo($("#dot20"), 0.5, {transformOrigin:"center", scaleX:1,scaleY:1}, {scaleX:1.5,scaleY:1.5},0.3) 
    .fromTo($("#dot20"), 0.5, {scaleX:1.5,scaleY:1.5}, {scaleX:1,scaleY:1},0.9)
    .fromTo($("#dot21"), 0.5, {transformOrigin:"center", scaleX:1,scaleY:1}, {scaleX:1.5,scaleY:1.5},0.6)
    .fromTo($("#dot21"), 0.5, {scaleX:1.5,scaleY:1.5}, {scaleX:1,scaleY:1},1.2);
t9  
    .fromTo($("#dot22"), 0.5, {rotation: 0 , transformOrigin:"100% -500%"}, {rotation: 40, ease:Power2.easeOut},0)
    .fromTo($("#dot22"), 0.5, {rotation: 40, transformOrigin:"100% -500%"}, {rotation: 0 , ease:Power2.easeIn},0.5)
    .fromTo($("#dot24"), 0.5, {rotation: 0 , transformOrigin:"100% -500%"}, {rotation:-40, ease:Power2.easeOut},1) 
    .fromTo($("#dot24"), 0.5, {rotation:-40, transformOrigin:"100% -500%"}, {rotation: 0 , ease:Power2.easeIn},1.5);
t10
   .fromTo($("#dot55"),1,{rotationY:0,ease:Power0.easeNone},{rotationY:360,ease:Power0.easeNone},0)
   .fromTo($("#dot56"),1,{rotationY:0,ease:Power0.easeNone},{rotationY:360,ease:Power0.easeNone},0)
   .fromTo($("#dot58"),1,{rotationY:0,ease:Power0.easeNone},{rotationY:360,ease:Power0.easeNone},0)
t10a
    .fromTo($("#dot57"), 0.4, {y:-120}, {y:-3, ease:Power2.easeIn},0)
    .fromTo($("#dot57"), 0.4, {y:-3},{y:-120, ease:Power2.easeOut});
t11
    .fromTo($("#dot59"), 1, {rotation:0, transformOrigin:"100% 300%"}, {rotation:360,ease:Power0.easeNone},0)
    .fromTo($("#dot60"), 1, {rotation:0, transformOrigin:"100% 300%"}, {rotation:360,ease:Power0.easeNone},0.2) 
    .fromTo($("#dot61"), 1, {rotation:0, transformOrigin:"100% 300%"}, {rotation:360,ease:Power0.easeNone},0.4);
t12  
    .fromTo($("#square50"), 1, {rotation:72,  transformOrigin:"100% 0%"}, {rotation:432,transformOrigin:"100% 300%"},0)
    .fromTo($("#square51"), 1, {rotation:144, transformOrigin:"100% 0%"}, {rotation:504,transformOrigin:"100% 300%"},0) 
    .fromTo($("#square52"), 1, {rotation:216, transformOrigin:"100% 0%"}, {rotation:576,transformOrigin:"100% 300%"},0)
    .fromTo($("#square53"), 1, {rotation:288, transformOrigin:"100% 0%"}, {rotation:648,transformOrigin:"100% 300%"},0) 
    .fromTo($("#square54"), 1, {rotation:360, transformOrigin:"100% 0%"}, {rotation:720,transformOrigin:"100% 300%"},0);

t13
    .fromTo($("#square6"), 2, {x:-170, ease: SteppedEase.config(12) }, {x:100, ease: SteppedEase.config(12)},0)
    .fromTo($("#square7"), 2, {x:-170, ease: SteppedEase.config(12) }, {x:100, ease: SteppedEase.config(12)},0)
    .fromTo($("#square8"), 2, {x:-170, ease: SteppedEase.config(12) }, {x:100, ease: SteppedEase.config(12)},0);
t14  
    .fromTo($("#square9"), 0.6, {rotationY:0,  transformOrigin:"right"},    {rotationY:180,transformOrigin:"right", })
    .fromTo($("#square9"), 0.6, {rotationX:0,  transformOrigin:"100% 100%"},{rotationX:180,transformOrigin:"100% 100%"})
    .fromTo($("#square9"), 0.6, {rotationY:180,transformOrigin:"100% 100%"},{rotationY:0,  transformOrigin:"100% 100%",})
    .fromTo($("#square9"), 0.6, {rotationX:180,transformOrigin:"50% 100%"}, {rotationX:0,  transformOrigin:"50% 100%",});
t15  
    .fromTo($("#square10"), 0.6, {y:40,rotationX:40,  transformOrigin:"right"},    {y:0,},0)
    .fromTo($("#square11"), 0.6, {y:40,rotationX:40,  transformOrigin:"right"},    {y:0,},0)
    .fromTo($("#square12"), 0.6, {y:40,rotationX:40,  transformOrigin:"right"},    {y:0,},0)

     .fromTo($("#square12"),0.2, {y:0,rotationX:40,  transformOrigin:"right"},     {y:40,},0.6)
    .fromTo($("#square11"), 0.25, {y:0,rotationX:40,  transformOrigin:"right"},    {y:40,},0.65)
    .fromTo($("#square10"), 0.3, {y:0,rotationX:40,  transformOrigin:"right"},     {y:40,},0.7);
t16  
    .fromTo($("#dot27"), 2, {rotation:0, transformOrigin:"center", ease:Power0.easeNone}, {rotation:360,ease:Power0.easeNone},0)
    .fromTo($("#dot28"), 2, {rotation:360, transformOrigin:"center", ease:Power0.easeNone}, {rotation:0,ease:Power0.easeNone},0)
    .fromTo($("#dot29"), 2, {rotation:0, transformOrigin:"center", ease:Power0.easeNone}, {rotation:360,ease:Power0.easeNone},0);
t17  
    .fromTo($("#dot26"), 2, {rotation:0, transformOrigin:"center", ease:Power0.easeNone}, {rotation:360,ease:Power0.easeNone});

t18  
    .fromTo($("#square24"), 10, {scaleX:1},{scaleX:10});
t19  
    .fromTo($("#square25"), 2, {x:-100,ease:Power0.easeNone},{x:200,ease:Power0.easeNone});
t20
    .fromTo($("#square26"), 0.5, {scaleY:-1,ease:Power0.easeNone},{scaleY:-5,ease:Power0.easeNone},0)
    .fromTo($("#square27"), 0.5, {scaleY:-1,ease:Power0.easeNone},{scaleY:-5,ease:Power0.easeNone},0.2)
    .fromTo($("#square28"), 0.5, {scaleY:-1,ease:Power0.easeNone},{scaleY:-5,ease:Power0.easeNone},0.4)
    .fromTo($("#square29"), 0.5, {scaleY:-1,ease:Power0.easeNone},{scaleY:-5,ease:Power0.easeNone},0.6)
    .fromTo($("#square30"), 0.5, {scaleY:-1,ease:Power0.easeNone},{scaleY:-5,ease:Power0.easeNone},0.8)
    .fromTo($("#square26"), 0.5, {scaleY:-5,ease:Power0.easeNone},{scaleY:-1,ease:Power0.easeNone},0.5)
    .fromTo($("#square27"), 0.5, {scaleY:-5,ease:Power0.easeNone},{scaleY:-1,ease:Power0.easeNone},0.7)
    .fromTo($("#square28"), 0.5, {scaleY:-5,ease:Power0.easeNone},{scaleY:-1,ease:Power0.easeNone},0.9)
    .fromTo($("#square29"), 0.5, {scaleY:-5,ease:Power0.easeNone},{scaleY:-1,ease:Power0.easeNone},1.1)
    .fromTo($("#square30"), 0.5, {scaleY:-5,ease:Power0.easeNone},{scaleY:-1,ease:Power0.easeNone},1.3);
t21
    .fromTo($("#square31"), 2, {rotationY:0, transformOrigin:"200% 100%"}, {rotationY:360},0)
    .fromTo($("#square32"), 2, {rotationY:0, transformOrigin:"200% 100%"}, {rotationY:360},0.2)
    .fromTo($("#square33"), 2, {rotationY:0, transformOrigin:"200% 100%"}, {rotationY:360},0.4); 
t22
    .fromTo($("#square22"), 0.4, {x:40,ease:Power2.easeIn}, {x:80,ease:Power2.In},0)
    .fromTo($("#square23"), 0.4, {x:120}, {x:80},0)
    .fromTo($("#square23"), 0.4, {scaleX:1,scaleY:1,transformOrigin:"center",}, {scaleX:2,scaleY:2},0.2)
    .fromTo($("#square23"), 0.4, {scaleX:2,scaleY:2}, {scaleX:1,scaleY:1},)
    .fromTo($("#square22"), 0.4, {scaleX:1,scaleY:1,transformOrigin:"center",}, {scaleX:2,scaleY:2},0.2)
    .fromTo($("#square22"), 0.4, {scaleX:2,scaleY:2}, {scaleX:1,scaleY:1},)
    .fromTo($("#square22"), 0.4, {x:80}, {x:40},1.2)
    .fromTo($("#square23"), 0.4, {x:80}, {x:120},1.2);
t23  
    .fromTo($("#dot30"), 1, {rotation:72,  transformOrigin:"100% 50%"}, {rotation:432,transformOrigin:"100% 150%"},0)
    .fromTo($("#dot31"), 1, {rotation:144, transformOrigin:"100% 50%"}, {rotation:504,transformOrigin:"100% 150%"},0) 
    .fromTo($("#dot32"), 1, {rotation:216, transformOrigin:"100% 50%"}, {rotation:576,transformOrigin:"100% 150%"},0)
    .fromTo($("#dot33"), 1, {rotation:288, transformOrigin:"100% 50%"}, {rotation:648,transformOrigin:"100% 150%"},0) 
    .fromTo($("#dot34"), 1, {rotation:360, transformOrigin:"100% 50%"}, {rotation:720,transformOrigin:"100% 150%"},0);
t24 
    .fromTo($("#dot35"), 0.4, {rotation:72, autoAlpha:0.3, transformOrigin:"100% 200%"}, {rotation:72,   autoAlpha:1},0)
    .fromTo($("#dot35"), 0.4, {rotation:72, autoAlpha:1, transformOrigin:"100% 200%"}, {rotation:72,   autoAlpha:0.3},0.4)
    .fromTo($("#dot36"), 0.4, {rotation:144,autoAlpha:0.3, transformOrigin:"100% 200%"}, {rotation:144,  autoAlpha:1},0.2) 
    .fromTo($("#dot36"), 0.4, {rotation:144,autoAlpha:1, transformOrigin:"100% 200%"}, {rotation:144,  autoAlpha:0.3},0.6)
    .fromTo($("#dot37"), 0.4, {rotation:216,autoAlpha:0.3, transformOrigin:"100% 200%"}, {rotation:216,  autoAlpha:1},0.4)
    .fromTo($("#dot37"), 0.4, {rotation:216,autoAlpha:1, transformOrigin:"100% 200%"}, {rotation:216,  autoAlpha:0.3},0.8)
    .fromTo($("#dot38"), 0.4, {rotation:288,autoAlpha:0.3, transformOrigin:"100% 200%"}, {rotation:288,  autoAlpha:1},0.6) 
    .fromTo($("#dot38"), 0.4, {rotation:288,autoAlpha:1, transformOrigin:"100% 200%"}, {rotation:288,  autoAlpha:0.3},1)
    .fromTo($("#dot39"), 0.4, {rotation:360,autoAlpha:0.3, transformOrigin:"100% 200%"}, {rotation:360,  autoAlpha:1},0.8)
    .fromTo($("#dot39"), 0.4, {rotation:360,autoAlpha:1, transformOrigin:"100% 200%"}, {rotation:360,  autoAlpha:0.3},1.2);
t25 
    .fromTo($("#square13"), 0.4, {autoAlpha:0}, {autoAlpha:1},0.2)
            .fromTo($("#square13"), 0.4, {autoAlpha:1}, {autoAlpha:0},0.6)        
    .fromTo($("#square14"), 0.4, {autoAlpha:0}, {autoAlpha:1},0.3)
            .fromTo($("#square14"), 0.4, {autoAlpha:1}, {autoAlpha:0},0.7)
    .fromTo($("#square15"), 0.4, {autoAlpha:0}, {autoAlpha:1},0.4)        
            .fromTo($("#square15"), 0.4, {autoAlpha:1}, {autoAlpha:0},0.8)
    .fromTo($("#square16"), 0.4, {autoAlpha:0}, {autoAlpha:1},0.1)
            .fromTo($("#square16"), 0.4, {autoAlpha:1}, {autoAlpha:0},0.5)
    .fromTo($("#square17"), 0.4, {autoAlpha:0}, {autoAlpha:1},0.2) 
            .fromTo($("#square17"), 0.4, {autoAlpha:1}, {autoAlpha:0},0.6)
    .fromTo($("#square18"), 0.4, {autoAlpha:0}, {autoAlpha:1},0.3)   
            .fromTo($("#square18"), 0.4, {autoAlpha:1}, {autoAlpha:0},0.7)
    .fromTo($("#square19"), 0.4, {autoAlpha:0}, {autoAlpha:1},0)
            .fromTo($("#square19"), 0.4, {autoAlpha:1}, {autoAlpha:0},0.4)
    .fromTo($("#square20"), 0.4, {autoAlpha:0}, {autoAlpha:1},0.1) 
            .fromTo($("#square20"), 0.4, {autoAlpha:1}, {autoAlpha:0},0.5)
    .fromTo($("#square21"), 0.4, {autoAlpha:0}, {autoAlpha:1},0.2)
            .fromTo($("#square21"), 0.4, {autoAlpha:1}, {autoAlpha:0},0.6);
t26 
    .fromTo($("#dot40"), 0.3, {y:50}, {y:70,ease:Power1.easeIn},0)
    .fromTo($("#dot40"), 0.3, {y:70}, {y:60,ease:Power1.easeIn},0.3)
        .fromTo($("#square34"), 0.3, {rotation:0,   transformOrigin:"center"}, {rotation:90},0)
    .fromTo($("#dot40"), 0.3, {y:60}, {y:80, ease:Power1.easeOut},0.6)
    .fromTo($("#dot40"), 0.3, {y:80}, {y:50, ease:Power1.easeOut},0.9)
        .fromTo($("#square34"), 0.3, {rotation:90,  transformOrigin:"center"}, {rotation:180},0.6)
    .fromTo($("#dot40"), 0.3, {y:50}, {y:70,ease:Power1.easeIn},1.2)
    .fromTo($("#dot40"), 0.3, {y:70}, {y:60,ease:Power1.easeIn},1.5)
        .fromTo($("#square34"), 0.3, {rotation:180, transformOrigin:"center"}, {rotation:270},1.2)
    .fromTo($("#dot40"), 0.3, {y:60}, {y:80, ease:Power1.easeOut},1.8)
    .fromTo($("#dot40"), 0.3, {y:80}, {y:50, ease:Power1.easeOut},2.1)
        .fromTo($("#square34"), 0.3, {rotation:270, transformOrigin:"center"}, {rotation:360},1.8);
t27
    .fromTo($("#square35"), 10, {rotation:0,   transformOrigin:"0% 0%"}, {rotation:360})
    .fromTo($("#square35"), 10, {rotation:0,   transformOrigin:"0% 0%"}, {rotation:360})
    .fromTo($("#square35"), 10, {rotation:0,   transformOrigin:"0% 0%"}, {rotation:360});
t28 
    .fromTo($("#square36"), 0.4, {autoAlpha:0}, {autoAlpha:1},0)
            .fromTo($("#square36"), 0.4, {autoAlpha:1}, {autoAlpha:0},0.4)        
    .fromTo($("#square37"), 0.4, {autoAlpha:0}, {autoAlpha:1},0.1)
            .fromTo($("#square37"), 0.4, {autoAlpha:1}, {autoAlpha:0},0.5)
    .fromTo($("#square38"), 0.4, {autoAlpha:0}, {autoAlpha:1},0.2)        
            .fromTo($("#square38"), 0.4, {autoAlpha:1}, {autoAlpha:0},0.6)
    .fromTo($("#square39"), 0.4, {autoAlpha:0}, {autoAlpha:1},0.3)
            .fromTo($("#square39"), 0.4, {autoAlpha:1}, {autoAlpha:0},0.7)        
    .fromTo($("#square40"), 0.4, {autoAlpha:0}, {autoAlpha:1},0.4)
            .fromTo($("#square40"), 0.4, {autoAlpha:1}, {autoAlpha:0},0.8)
    .fromTo($("#square41"), 0.4, {autoAlpha:0}, {autoAlpha:1},0.5)        
            .fromTo($("#square41"), 0.4, {autoAlpha:1}, {autoAlpha:0},0.9); 
t29 
        .fromTo($("#dot42"), 1, {y:70, x:60}, {y:70,x:130,ease:Power4.easeIn},0)
        .fromTo($("#dot42"), 1, {y:70, x:130}, {y:70,x:60,ease:Power4.easeIn},);
t29a
        .fromTo($("#box4"), 1, {rotation:-30, transformOrigin:"center"}, {rotation:30},0)
        .fromTo($("#box4"), 1, {rotation:30, transformOrigin:"center"}, {rotation:-30},)
t30
    .fromTo($("#dot43"), 0.7, {rotation:-60, transformOrigin:"100% 300%",ease:Power0.easeNone}, {rotation:90,ease:Power0.easeNone},)
    .fromTo($("#dot43"), 0.7, {rotation:90, transformOrigin:"100% 300%",ease:Power0.easeNone}, {rotation:-60,ease:Power0.easeNone},);
t31
    .fromTo($("#dot44"), 2, {transformOrigin:"center",autoAlpha:1,scalX:1,scalY:1}, {autoAlpha:0,scaleX:5,scaleY:5},)
t32
    .fromTo($("#dot45"), 4, {ease:Power0.easeNone,transformOrigin:"center",rotation:0}, {ease:Power0.easeNone,rotation:360},)
t33
    .fromTo($("#dot46"), 0.3, {x:-70,y:35}, {x:-5,y:70, ease:Power0.easeNone},)
    .fromTo($("#dot46"), 0.3, {x:-5,y:70}, {x:60,y:35, ease:Power0.easeNone},)
    .fromTo($("#dot46"), 0.3, {x:60,y:35}, {x:-5,y:0, ease:Power0.easeNone},)
    .fromTo($("#dot46"), 0.3, {x:-5,y:0}, {x:-70,y:35, ease:Power0.easeNone},)
t33a
    .fromTo($("#square45"), 0.3, {y:70}, {y:10},0)
    .fromTo($("#square45"), 0.3, {y:10}, {y:70})
    .fromTo($("#square46"), 0.3, {y:10}, {y:70},)
    .fromTo($("#square46"), 0.3, {y:70}, {y:10});
t34
    .fromTo($("#dot47"), 0.3, {transformOrigin:"center",rotation:180,ease:Power0.easeNone}, {rotation:135, ease:Power0.easeNone},0)
    .fromTo($("#dot47"), 0.3, {transformOrigin:"center",rotation:135,ease:Power0.easeNone}, {rotation:180, ease:Power0.easeNone},0.3)
    .fromTo($("#dot48"), 0.3, {transformOrigin:"center",rotation:0,ease:Power0.easeNone}, {rotation:45, ease:Power0.easeNone},0)
    .fromTo($("#dot48"), 0.3, {transformOrigin:"center",rotation:45,ease:Power0.easeNone}, {rotation:0, ease:Power0.easeNone},0.3);
t34a
    .fromTo($("#dot49"), 0.6, {x:210}, {x:70});
t35
    .fromTo($("#square48"), 0.5, {y:-90,ease:Power0.easeNone}, {y:110,ease:Power0.easeNone});
t36  
    .fromTo($("#dot50"), 4, {rotation:0, transformOrigin:"center",strokeDashoffset:"400",strokDasharray:"200"}, {rotation:360,strokeDashoffset:"0",strokeDasharray:"200"});
t37 
    .fromTo($("#dot51"), 4, {strokeDashoffset:"200", ease:Power0.easeNone,strokDasharray:"100"},{ease:Power0.easeNone,strokeDashoffset:"0",strokeDasharray:"100"});
t38    
    .fromTo($("#dot54"), 10, {strokeDashoffset:"300", ease:Power0.easeNone,strokDasharray:"150"},{ease:Power0.easeNone,strokeDashoffset:"0",strokeDasharray:"150"});
t39
    .fromTo($("#dot25"), 1, {scaleX:1,scaleY:1, transformOrigin:"center"}, {scaleX:2,scaleY:2},0)
    .fromTo($("#dot25"), 1, {scaleX:2,scaleY:2}, {scaleX:1,scaleY:1},1);

t40
    .fromTo($("#square1"), 0.4, {autoAlpha:0}, {autoAlpha:1},0)
    .fromTo($("#square1"), 0.4, {autoAlpha:1}, {autoAlpha:0},0.8)
    .fromTo($("#square2"), 0.4, {autoAlpha:0}, {autoAlpha:1},0.4)
    .fromTo($("#square2"), 0.4, {autoAlpha:1}, {autoAlpha:0},1.2)
    .fromTo($("#square4"), 0.4, {autoAlpha:0}, {autoAlpha:1},0.8)
    .fromTo($("#square4"), 0.4, {autoAlpha:1}, {autoAlpha:0},1.6)
    .fromTo($("#square3"), 0.4, {autoAlpha:0}, {autoAlpha:1},1.2)
    .fromTo($("#square3"), 0.4, {autoAlpha:1}, {autoAlpha:0},2);
t41  
    .fromTo($("#square5"), 0.4, {y:90, transformOrigin:"center"}, {rotation:270,y:140, ease:Power2.easeIn},0)
    .fromTo($("#square5"), 0.4, {y:140,}, {y:90, ease:Power2.easeOut});

t42  
    .fromTo($("#square55"), 0.6, {autoAlpha:1,y:40,rotationX:40,  transformOrigin:"right"},    {y:40,autoAlpha:1},0)
    .fromTo($("#square66"), 0.6, {autoAlpha:0,y:0,rotationX:40,  transformOrigin:"right"},    {y:40,autoAlpha:1},0.1)
    .fromTo($("#square77"), 0.6, {autoAlpha:0,y:0,rotationX:40,  transformOrigin:"right"},    {y:40,autoAlpha:1},0.2)
    .fromTo($("#square55"), 0.6, {autoAlpha:1,y:40,rotationX:40,  transformOrigin:"right"},    {y:80,autoAlpha:0},1)
    .fromTo($("#square66"), 0.6, {autoAlpha:1,y:40,rotationX:40,  transformOrigin:"right"},    {y:80,autoAlpha:0},1.1)
    .fromTo($("#square77"), 0.6, {autoAlpha:1,y:40,rotationX:40,  transformOrigin:"right"},    {y:80,autoAlpha:0},1.2);
t43  
    .fromTo($("#dot16"), 0.4, {autoAlpha:0}, {autoAlpha:1},'+=0.5')
    .fromTo($("#dot17"), 0.4, {autoAlpha:0}, {autoAlpha:1}) 
    .fromTo($("#dot18"), 0.4, {autoAlpha:0}, {autoAlpha:1});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Behavior

Save Automatically?

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions