Edit in JSFiddle

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100">
    <g>
        <circle class="c1" opacity="1.0" cx="49.5" cy="10" r="8" />
        <circle class="c2" opacity="0.12" cx="69.73" cy="15.256" r="8" />
        <circle class="c3" opacity="0.2" cx="84.57" cy="29.589" r="8" />
        <circle class="c4" opacity="0.28" cx="90" cy="49.5" r="8" />
        <circle class="c5" opacity="0.36" cx="84.57" cy="70.186" r="8" />
        <circle class="c6" opacity="0.44" cx="69.73" cy="84.576" r="8" />
        <circle class="c7" opacity="0.52" cx="49.5" cy="90" r="8" />
        <circle class="c8" opacity="0.6" cx="29.601" cy="84.576" r="8" />
        <circle class="c9" opacity="0.68" cx="15.183" cy="69.652" r="8" />
        <circle class="c10" opacity="0.76" cx="10" cy="49.501" r="8" />
        <circle class="c11" opacity="0.84" cx="15.183" cy="30.32" r="8" />
        <circle class="c12" opacity="0.92" cx="29.602" cy="15.649" r="8" />
    </g>
</svg>

 circle {
     fill: #0054C1;
 }
 @-webkit-keyframes fade {
     0% {
         opacity: 1;
     }
     100% {
         opacity: 0;
     }
 }
 @keyframes fade {
     0% {
         opacity: 1;
     }
     100% {
         opacity: 0;
     }
 }
 .c1 {
     -webkit-animation: fade 1s linear 0s infinite normal;
     animation: fade 1s linear 0s infinite normal;
 }
 .c2 {
     -webkit-animation: fade 1s linear 0.12s infinite normal;
     animation: fade 1s linear 0.12s infinite normal;
 }
 .c3 {
     -webkit-animation: fade 1s linear 0.12s infinite normal;
     animation: fade 1s linear 0.12s infinite normal;
 }
 .c4 {
     -webkit-animation: fade 1s linear 0.28s infinite normal;
     animation: fade 1s linear 0.28s infinite normal;
 }
 .c5 {
     -webkit-animation: fade 1s linear 0.36s infinite normal;
     animation: fade 1s linear 0.36s infinite normal;
 }
 .c6 {
     -webkit-animation: fade 1s linear 0.44s infinite normal;
     animation: fade 1s linear 0.44s infinite normal;
 }
 .c7 {
     -webkit-animation: fade 1s linear 0.52s infinite normal;
     animation: fade 1s linear 0.52s infinite normal;
 }
 .c8 {
     -webkit-animation: fade 1s linear 0.6s infinite normal;
     animation: fade 1s linear 0.6s infinite normal;
 }
 .c9 {
     -webkit-animation: fade 1s linear 0.68s infinite normal;
     animation: fade 1s linear 0.68s infinite normal;
 }
 .c10 {
     -webkit-animation: fade 1s linear 0.76s infinite normal;
     animation: fade 1s linear 0.76s infinite normal;
 }
 .c11 {
     -webkit-animation: fade 1s linear 0.84s infinite normal;
     animation: fade 1s linear 0.84s infinite normal;
 }
 .c12 {
     -webkit-animation: fade 1s linear 0.92s infinite normal;
     animation: fade 1s linear 0.92s infinite normal;
 }