Test CircleCount PRO now!
Show Code 
div.dot {
  position: relative;
  width: 20px;
  height: 20px;
  position: absolute;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px; 
  background-color: #FFFFFF;
  
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: running;
}

div.one {-webkit-animation-name: dotone;     -webkit-animation-delay: 1.75s;
animation-name: dotone; animation-delay: 1.75s;
}
div.two {-webkit-animation-name: dottwo;     -webkit-animation-delay: 1.5s;
animation-name: dottwo; animation-delay: 1.5s;
}
div.three {-webkit-animation-name: dotthree; -webkit-animation-delay: 1.25s;
animation-name: dotthree; animation-delay: 1.25s;
}
div.four {-webkit-animation-name: dotfour;   -webkit-animation-delay: 1s;
animation-name: dotfour; animation-delay: 1s;
}
div.five {-webkit-animation-name: dotfive;   -webkit-animation-delay: 0.75s;
animation-name: dotfive; animation-delay: 0.75s;
}
div.six {-webkit-animation-name: dotsix;     -webkit-animation-delay: 0.5s;
animation-name: dotsix; animation-delay: 0.5s;
}
div.seven {-webkit-animation-name: dotseven; -webkit-animation-delay: 0.25s;
animation-name: dotseven; animation-delay: 0.25s;
}
div.eight {-webkit-animation-name: doteight; -webkit-animation-delay: 0s;
animation-name: doteight; animation-delay: 0s;
}

@-webkit-keyframes dotone {
    0%   {left:258px; top:5px;}
    100%  {left:258px; top:521px;}
}
    
@-webkit-keyframes dottwo {
    0%   {left:164px; top:25px;}
    100%  {left:356px; top:503px;}
}
    
@-webkit-keyframes dotthree {
    0%   {left:80px; top:80px;}
    100%  {left:438px; top:438px;}
}
    
@-webkit-keyframes dotfour {
    0%   {left:28px; top:162px;}
    100%  {left:502px; top:360px;}
}
    
@-webkit-keyframes dotfive {
    0%   {left:0px; top:260px;}
    100%  {left:520px; top:260px;}
}
    
@-webkit-keyframes dotsix {
    0%  {left:26px; top:356px;}
    100%   {left:500px; top:160px;}
}
    
@-webkit-keyframes dotseven {
    0%  {left:74px; top:440px;}
    100%   {left:448px; top:70px;}
}
    
@-webkit-keyframes doteight {
    0%  {left:158px; top:506px;}
    100%   {left:356px; top:19px;}
}
    
@keyframes dotone {
    0%   {left:258px; top:5px;}
    100%  {left:258px; top:521px;}
}
    
@keyframes dottwo {
    0%   {left:164px; top:25px;}
    100%  {left:356px; top:503px;}
}
    
@keyframes dotthree {
    0%   {left:80px; top:80px;}
    100%  {left:438px; top:438px;}
}
    
@keyframes dotfour {
    0%   {left:28px; top:162px;}
    100%  {left:502px; top:360px;}
}
    
@keyframes dotfive {
    0%   {left:0px; top:260px;}
    100%  {left:520px; top:260px;}
}
    
@keyframes dotsix {
    0%  {left:26px; top:356px;}
    100%   {left:500px; top:160px;}
}
    
@keyframes dotseven {
    0%  {left:74px; top:440px;}
    100%   {left:448px; top:70px;}
}
    
@keyframes doteight {
    0%  {left:158px; top:506px;}
    100%   {left:356px; top:19px;}
}
    
#circle {
  width: 540px;
  height: 540px;
  position: relative;
  -webkit-border-radius: 270px;
  -moz-border-radius: 270px;
  border-radius: 270px; 
  background-color: #4389c6;
  clear:both;
  margin: auto;
}