.circular{
 animation: rotate 2s linear infinite;
 height: 100px;
 position: relative;
 width: 100px;
}

.path {
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
  animation:
   dash 1.5s ease-in-out infinite
  ;
  stroke-linecap: square;
  stroke: #33a9ff;
}

@keyframes rotate{
 100%{
  transform: rotate(360deg);
 }
}

@keyframes dash{
 0%{
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
 }
 50%{
  stroke-dasharray: 89,200;
  stroke-dashoffset: -35;
 }
 100%{
  stroke-dasharray: 89,200;
  stroke-dashoffset: -124;
 }
}

@keyframes color{
  100%, 0%{
    stroke: #33a9ff;
  }
  40%{
    stroke: #ffffff;
  }
  66%{
    stroke: #33a9ff;
  }
  80%, 90%{
    stroke: #ffffff;
  }
}