<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> <!------ Include the above in your HEAD tag ----------> <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>

.progress { --percent: 50; stroke-dashoffset: calc(142 - (var(--percent) * 142 / 100)); }