HTML

<div>
    <svg viewBox="0 0 84 83.9" enable-background="new 0 0 84 83.9" >
        <path class="path1" fill="none" stroke="#E5E6E7" stroke-width="8" stroke-miterlimit="10" d="M42,4.5c9.2,0,17.7,3.4,24.3,9 c8.1,6.9,13.2,17.1,13.2,28.5c0,20.7-16.8,37.5-37.5,37.5S4.5,62.7,4.5,42C4.5,21.3,21.3,4.5,42,4.5"/>
        <path class="path2" fill="none" stroke="#B6C0D8" stroke-width="8" stroke-miterlimit="10" d="M42.6,4.5c9.2-0.1,17.6,3.5,23.8,9.4"/>
    </svg>
</div>

CSS

div { width: 300px; height: 300px; }

.path1,
.path2 {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 2s linear alternate infinite;
}

@keyframes dash {
  from { stroke-dashoffset: 1000;}
  to { stroke-dashoffset: 0;}
}