SOURCE

<div id='floatingCirclesG'>
  <div id='frotateG_01' class='f_circleG'></div>
  <div id='frotateG_02' class='f_circleG'></div>
  <div id='frotateG_03' class='f_circleG'></div>
  <div id='frotateG_04' class='f_circleG'></div>
  <div id='frotateG_05' class='f_circleG'></div>
  <div id='frotateG_06' class='f_circleG'></div>
  <div id='frotateG_07' class='f_circleG'></div>
  <div id='frotateG_08' class='f_circleG'></div>
  
</div>

html,body{
     margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #1f1f1f;
  
}
body{
    display: grid;
    place-items: center;
    box-sizing: border-box;
     background: #1f1f1f;
}
#floatingCirclesG{
position:relative;
width:128px;
height:128px;
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
-ms-transform:scale(0.6);
}

.f_circleG{
position:absolute;
background-color:#FFFFFF;
height:23px;
width:23px;
-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
-webkit-animation-name:f_fadeG;
-webkit-animation-duration:1.04s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-moz-animation-name:f_fadeG;
-moz-animation-duration:1.04s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-o-animation-name:f_fadeG;
-o-animation-duration:1.04s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-ms-animation-name:f_fadeG;
-ms-animation-duration:1.04s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
}

#frotateG_01{
left:0;
top:52px;
-webkit-animation-delay:0.39s;
-moz-animation-delay:0.39s;
-o-animation-delay:0.39s;
-ms-animation-delay:0.39s}

#frotateG_02{
left:15px;
top:15px;
-webkit-animation-delay:0.52s;
-moz-animation-delay:0.52s;
-o-animation-delay:0.52s;
-ms-animation-delay:0.52s}

#frotateG_03{
left:52px;
top:0;
-webkit-animation-delay:0.65s;
-moz-animation-delay:0.65s;
-o-animation-delay:0.65s;
-ms-animation-delay:0.65s;
}

#frotateG_04{
right:15px;
top:15px;
-webkit-animation-delay:0.78s;
-moz-animation-delay:0.78s;
-o-animation-delay:0.78s;
-ms-animation-delay:0.78s;
}

#frotateG_05{
right:0;
top:52px;
-webkit-animation-delay:0.91s;
-moz-animation-delay:0.91s;
-o-animation-delay:0.91s;
-ms-animation-delay:0.91s;
}

#frotateG_06{
right:15px;
bottom:15px;
-webkit-animation-delay:1.04s;
-moz-animation-delay:1.04s;
-o-animation-delay:1.04s;
-ms-animation-delay:1.04s;
}

#frotateG_07{
left:52px;
bottom:0;
-webkit-animation-delay:1.17s;
-moz-animation-delay:1.17s;
-o-animation-delay:1.17s;
-ms-animation-delay:1.17s;
}

#frotateG_08{
left:15px;
bottom:15px;
-webkit-animation-delay:1.3s;
-moz-animation-delay:1.3s;
-o-animation-delay:1.3s;
-ms-animation-delay:1.3s;
}

@-webkit-keyframes f_fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@-moz-keyframes f_fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@-o-keyframes f_fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@-ms-keyframes f_fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}