HTML
<div class='container'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
CSS
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #181e27;
}
.container {
width: 1em;
height: 1em;
position: relative;
}
.dot:nth-of-type(1) {
width: 100%;
height: 100%;
border-radius: 3px;
background: #f57df5;
box-shadow: 0 0 1em 0.13em #f57df5;
position: absolute;
opacity: 1;
transform: rotate(36deg) translateX(2em);
animation: bigger 1s 0.1s linear infinite;
}
.dot:nth-of-type(2) {
width: 100%;
height: 100%;
border-radius: 3px;
background: #3498db;
box-shadow: 0 0 1em 0.13em #3498db;
position: absolute;
opacity: 1;
transform: rotate(72deg) translateX(2em);
animation: bigger 1s 0.2s linear infinite;
}
.dot:nth-of-type(3) {
width: 100%;
height: 100%;
border-radius: 3px;
background: #2ecc71;
box-shadow: 0 0 1em 0.13em #2ecc71;
position: absolute;
opacity: 1;
transform: rotate(108deg) translateX(2em);
animation: bigger 1s 0.3s linear infinite;
}
.dot:nth-of-type(4) {
width: 100%;
height: 100%;
border-radius: 3px;
background: #1abc9c;
box-shadow: 0 0 1em 0.13em #1abc9c;
position: absolute;
opacity: 1;
transform: rotate(144deg) translateX(2em);
animation: bigger 1s 0.4s linear infinite;
}
.dot:nth-of-type(5) {
width: 100%;
height: 100%;
border-radius: 3px;
background: #f1c40f;
box-shadow: 0 0 1em 0.13em #f1c40f;
position: absolute;
opacity: 1;
transform: rotate(180deg) translateX(2em);
animation: bigger 1s 0.5s linear infinite;
}
.dot:nth-of-type(6) {
width: 100%;
height: 100%;
border-radius: 3px;
background: #e67e22;
box-shadow: 0 0 1em 0.13em #e67e22;
position: absolute;
opacity: 1;
transform: rotate(216deg) translateX(2em);
animation: bigger 1s 0.6s linear infinite;
}
.dot:nth-of-type(7) {
width: 100%;
height: 100%;
border-radius: 3px;
background: #e74c3c;
box-shadow: 0 0 1em 0.13em #e74c3c;
position: absolute;
opacity: 1;
transform: rotate(252deg) translateX(2em);
animation: bigger 1s 0.7s linear infinite;
}
.dot:nth-of-type(8) {
width: 100%;
height: 100%;
border-radius: 3px;
background: #ecf0f1;
box-shadow: 0 0 1em 0.13em #ecf0f1;
position: absolute;
opacity: 1;
transform: rotate(288deg) translateX(2em);
animation: bigger 1s 0.8s linear infinite;
}
.dot:nth-of-type(9) {
width: 100%;
height: 100%;
border-radius: 3px;
background: #feb545;
box-shadow: 0 0 1em 0.13em #feb545;
position: absolute;
opacity: 1;
transform: rotate(324deg) translateX(2em);
animation: bigger 1s 0.9s linear infinite;
}
.dot:nth-of-type(10) {
width: 100%;
height: 100%;
border-radius: 3px;
background: #5bc4ed;
box-shadow: 0 0 1em 0.13em #5bc4ed;
position: absolute;
opacity: 1;
transform: rotate(360deg) translateX(2em);
animation: bigger 1s 1s linear infinite;
}
@keyframes bigger {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
