.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: rotate(45deg) translate(-50%, -50%);
  }
  .loader li {
    list-style-type: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 15px;
    height: 15px;
    background: #0772B3;
    border-radius: 50%;
  }
  .loader li.dot-a {
    animation: a 0.5s ease-in-out infinite;
    top: -25px;
    left: -25px;
  }
  .loader li.dot-b {
    animation: b 0.5s ease-in-out infinite;
    top: -25px;
    left: 0px;
  }
  .loader li.dot-c {
    animation: c 0.5s ease-in-out infinite;
    top: -25px;
    left: 25px;
  }
  .loader li.dot-d {
    animation: d 0.5s ease-in-out infinite;
    top: 0px;
    left: -25px;
  }
  .loader li.dot-e {
    animation: e 0.5s ease-in-out infinite;
    top: 0px;
    left: 0px;
  }
  .loader li.dot-f {
    animation: f 0.5s ease-in-out infinite;
    top: 0px;
    left: 25px;
  }
  .loader li.dot-g {
    animation: g 0.5s ease-in-out infinite;
    top: 25px;
    left: -25px;
  }
  .loader li.dot-h {
    animation: h 0.5s ease-in-out infinite;
    top: 25px;
    left: 0px;
  }
  .loader li.dot-i {
    animation: i 0.5s ease-in-out infinite;
    top: 25px;
    left: 25px;
  }
  
  @keyframes a {
    50% {
      top: 0px;
      left: -25px;
    }
    100% {
      top: 0px;
      left: -25px;
    }
  }
  @keyframes b {
    50% {
      top: -25px;
      left: -25px;
    }
    100% {
      top: -25px;
      left: -25px;
    }
  }
  @keyframes c {
    50% {
      top: -25px;
      left: 0px;
    }
    100% {
      top: -25px;
      left: 0px;
    }
  }
  @keyframes d {
    50% {
      top: 25px;
      left: -25px;
    }
    100% {
      top: 25px;
      left: -25px;
    }
  }
  /*@keyframes e{
      50% {
          top: 0px;
          left: -25px;
      }
      100% {
          top: 0px;
          left: -25px;
      }
  }*/
  @keyframes f {
    50% {
      top: -25px;
      left: 25px;
    }
    100% {
      top: -25px;
      left: 25px;
    }
  }
  @keyframes g {
    50% {
      top: 25px;
      left: 0px;
    }
    100% {
      top: 25px;
      left: 0px;
    }
  }
  @keyframes h {
    50% {
      top: 25px;
      left: 25px;
    }
    100% {
      top: 25px;
      left: 25px;
    }
  }
  @keyframes i {
    50% {
      top: 0px;
      left: 25px;
    }
    100% {
      top: 0px;
      left: 25px;
    }
  }