.site-loading-circle {
    position: absolute;
    height: 16px;
    width: 16px;
    background: white;
    opacity: 0.2;
    border-radius: 50%;
  }
  
  .site-loading-circle-a {
    -webkit-animation: fadeIn 2s infinite;
    -moz-animation: fadeIn 2s infinite;
    animation: fadeIn 2s infinite;
  }
  
  .site-loading-state1a {
    top: -15px;
    left: 18px;
  }
  
  .site-loading-state2a {
    top: -15px;
    left: 47px;
    -webkit-animation-delay: 500ms;
    -moz-animation-delay: 500ms;
    animation-delay: 500ms;
  }
  
  
  /*Square a blink blink*/
  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0.2;
    }
    10% {
      opacity: 1;
    }
  }
  @-moz-keyframes fadeIn {
    0% {
      opacity: 0.2;
    }
    10% {
      opacity: 1;
    }
  }
  @keyframes fadeIn {
    0% {
      opacity: 0.2;
    }
    10% {
      opacity: 1;
    }
  }
  @-webkit-keyframes state1-animation {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @-moz-keyframes state1-animation {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes state1-animation {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @-webkit-keyframes state2-animation {
    0% {
      opacity: 0;
    }
    10% {
      opacity: 0;
    }
    60% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @-moz-keyframes state2-animation {
    0% {
      opacity: 0;
    }
    10% {
      opacity: 0;
    }
    60% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes state2-animation {
    0% {
      opacity: 0;
    }
    10% {
      opacity: 0;
    }
    60% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }