<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<svg iewBox="0 0 100 50">
<g fill-opacity="0" stroke-width="10">
<path d="M5 50a45 45 0 1 1 90 0" stroke="#eaeaea" />
<path class="progress" d="M5 50a45 45 0 1 1 90 0" stroke="#9e2e57" stroke-dasharray="142" stroke-dashoffset="142"> <animate attributeType="XML" attributeName="stroke-dashoffset" from="140" to="60" dur="5s" fill="freeze"/></path>
</g>
</svg>
</div>
</div>
