es facil, dibujas la elipse de fondo eliges color del trazo de fondo osea el gris, despues la duplicas y eliges el color del trazo azul.
despues con la herramienta trazo le das borde redondeado y con la herramienta tijera borras el porcentaje de circunferencia que quieras
(que dificil de explicar)
si copias esto en un html te sale
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="33.7px" height="33.7px" viewBox="0 0 33.7 33.7" style="enable-background:new 0 0 33.7 33.7;"
xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#DDDDDD;stroke-width:5;stroke-miterlimit:10;}
.st1{fill:none;stroke:#3BB4FF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<defs>
</defs>
<circle class="st0" cx="16.9" cy="16.9" r="14.4"/>
<path class="st1" d="M30.8,13.2c0.3,1.2,0.5,2.4,0.5,3.6c0,7.9-6.4,14.4-14.4,14.4S2.5,24.8,2.5,16.9S8.9,2.5,16.9,2.5"/>
</svg>
va, para que veas como es
https://drive.google.com/open?id=0By...UpNNkhDNFZiaHc