<div id="box">
<div id="ball"></div>
<div class="dot" id="one"></div>
<div class="dot" id="two"></div>
<div class="dot" id="three"></div>
<div class="dot" id="four"></div>
<div class="box-small">
<div class="ball-small"></div>
<div class="small-dot" id="one-small"></div>
<div class="small-dot" id="two-small"></div>
<div class="small-dot" id="three-small"></div>
<div class="small-dot" id="four-small"></div>
</div>
<div class="box-tiny">
<div class="ball-small" id="delay"></div>
<div class="small-dot" id="one-tiny"></div>
<div class="small-dot" id="two-tiny"></div>
<div class="small-dot" id="three-tiny"></div>
<div class="small-dot" id="four-tiny"></div>
</div>
</div>
body {
background-color: rgb(17, 34, 51);
}
#ball {
width: 25px;
height: 25px;
position: relative;
background-color: rgb(100, 100, 100);
border-radius: 50%;
border: 1px solid white;
z-index: 2;
animation: bounceBall 2s linear infinite;
animation: bounceBall 2s linear infinite;
}
.ball-small {
width: 7px;
height: 7px;
position: relative;
background-color: rgb(75, 75, 75);
border-radius: 50%;
border: 1px solid white;
animation: bounceSmallBall 2s linear infinite;
animation: bounceSmallBall 2s linear infinite;
}
#delay {
animation-delay: -99s;
animation-delay: -99s;
}
#box {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
transform: rotate(45deg);
transform: rotate(45deg);
transform: rotate(45deg);
overflow: hidden;
}
.box-small {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
transform: rotate(45deg);
transform: rotate(45deg);
transform: rotate(45deg);
}
.box-tiny {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
.dot {
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
animation: colorPulse 2s infinite;
animation: colorPulse 2s infinite;
}
.small-dot {
width: 3px;
height: 3px;
border-radius: 50%;
position: absolute;
animation: colorPulse 2s infinite;
animation: colorPulse 2s infinite;
}
#one, #one-small, #one-tiny {
top: 0px;
left: 0px;
animation-delay: 0s;
animation-delay: 0s;
}
#two, #two-small, #two-tiny {
top: 0px;
right: 0px;
animation-delay: 0.5s;
animation-delay: 0.5s;
}
#three, #three-small, #three-tiny {
bottom: 0px;
right: 0px;
animation-delay: 1s;
animation-delay: 1s;
}
#four, #four-small, #four-tiny {
bottom: 0px;
left: 0px;
animation-delay: 1.5s;
animation-delay: 1.5s;
}
@-webkit-keyframes bounceBall {
0% {
left: 0px;
top: 0px;
}
25% {
left: 171px;
top: 0px;
}
50% {
top: 171px;
left: 171px;
}
75% {
left: 0px;
top: 171px;
}
100% {
top: 0px;
left: 0px;
}
}
@keyframes bounceBall {
0% {
left: 0px;
top: 0px;
}
25% {
left: 171px;
top: 0px;
}
50% {
top: 171px;
left: 171px;
}
75% {
left: 0px;
top: 171px;
}
100% {
top: 0px;
left: 0px;
}
}
@-webkit-keyframes bounceSmallBall {
0% {
left: 0px;
top: 0px;
}
25% {
left: 90px;
top: 0px;
}
50% {
top: 90px;
left: 90px;
}
75% {
left: 0px;
top: 90px;
}
100% {
top: 0px;
left: 0px;
}
}
@keyframes bounceSmallBall {
0% {
left: 0px;
top: 0px;
}
25% {
left: 90px;
top: 0px;
}
50% {
top: 90px;
left: 90px;
}
75% {
left: 0px;
top: 90px;
}
100% {
top: 0px;
left: 0px;
}
}
@-webkit-keyframes colorPulse {
from, to {
background-color: rgba(200, 200, 200, 1);
}
50% {
background-color: rgba(200, 200, 200, 0.2);
}
}
@keyframes colorPulse {
from, to {
background-color: rgba(200, 200, 200, 1);
}
50% {
background-color: rgba(200, 200, 200, 0.2);
}
}
xxxxxxxxxx