Create Progress wheel in CSS
<p>I want to create a progress wheel in html and css, if necessary than <code>jQuery</code> also. I create a wheel but problem is that how can I set the length of the borders according to given percentage.<br>
Here is Code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="loader"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>It create a circle and blue border on it but I want like the below image.
<a href="https://i.stack.imgur.com/Tjbi1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tjbi1.jpg" alt="Progress Wheel with precentage"></a></p>