@keyframes mlskf{
    100% {
        transform: rotate(360deg);
    }
}
 
@keyframes mlsdkf{
    0% {
        stroke-dasharray: 1,189;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 134,189;
        stroke-dashoffset: -53px;
    }
    100% {
        stroke-dasharray: 134,189;
        stroke-dashoffset: -188px;
    }
}
.mls {
    animation: mlskf 2s linear infinite;
    height: 50%;
    width: 50%;
}
 
.mlsd {
    stroke-dasharray: 1,189;
    stroke-dashoffset: 0;
    animation: mlsdkf 1.4s ease-in-out infinite;
}

<svg class="mls" viewBox="50 50 100 100">
  <circle class="mlsd" cx="100" cy="100" r="30" fill="none" stroke="#9E9E9E" stroke-width="3"></circle>
</svg>