Circular Progress

SVG circle progress ring.

.cprog { width:60px; height:60px; }
.cprog circle { fill:none; stroke-width:4; stroke-linecap:round; }
.cprog .bg { stroke:#333; }
.cprog .fg { stroke:#8b5cf6; stroke-dasharray:188; stroke-dashoffset:50; animation:cpAnim 1.5s ease-in-out infinite; }
@keyframes cpAnim { 0%{stroke-dashoffset:188} 50%{stroke-dashoffset:50} 100%{stroke-dashoffset:188} }