index.css

#loader {
  width: 200px;
  height: 200px;
  background-color: #DCEDFF;
  /*animation: square-to-circle 10s infinite cubic-bezier(1,.015,.295,1.225);*/
  animation-name: square-to-circle;
  animation-duration: 5s;
  animation-timing-function: cubic-bezier(1,.01,.76,1.61);
  animation-delay: 0.1s;
  animation-iteration-count: infinite;
  margin: 100px auto;
}

@keyframes square-to-circle {
  0% {
    border-radius: 0 0 0 0;
    background: #DCEDFF;
    transform: rotate(0deg);
  }
  12.5% {
    border-radius: 50% 0 0 0;
    transform: rotate(45deg);
  }
  25% {
    border-radius: 50% 50% 0 0;
    background: #4DA1A9;
    transform: rotate(90deg);
  }
  37.5% {
    border-radius: 50% 50% 50% 0;
    transform: rotate(135deg);
  }
  50% {
    border-radius: 50%;
    background: #2E5077;
    transform: rotate(180deg);
  }
  62.5%  {
    border-radius: 0 50% 50% 50%;
    transform: rotate(225deg);
  }
  75%  {
    border-radius: 0 0 50% 50%;
    background: #4DA1A9;
    transform: rotate(270deg);
  }
  87.5%  {
    border-radius: 0 0 0 50%;
    transform: rotate(315deg);
  }
  100%  {
    border-radius: 0 0 0 0;
    background: #DCEDFF;
    transform: rotate(360deg);
  }
}