43 прелоадера

43 анимированных прелоадера

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="#030d1c"; 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:#030d1c;
}
#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,#030d1c , 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});