× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

HTML/CSS: Percent circle indicator

Apr 09, 2015
<p>Considering the shape of the progress bar (rounded end/start) I would suggest using SVG.</p> <p><strong>DEMO: <a href="http://codepen.io/web-tiki/pen/qEGvMN" rel="nofollow">Radial progress bar</a></strong></p> <p><a href="http://codepen.io/web-tiki/pen/qEGvMN" rel="nofollow"><img src="http://i.stack.imgur.com/cK5lv.jpg" alt="Radial progress bar"></a></p> <p>In the following example, the progress is animated with the <code>stroke-dasarray</code> attribute and the % numbers are incremented with jQuery:</p> <p></p><div class="snippet"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>var count = $(('#count')); $({ Counter: 0 }).animate({ Counter: count.text() }, { duration: 5000, easing: 'linear', step: function () { count.text(Math.ceil(this.Counter)+ "%"); } });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>body{text-align:center;font-family: 'Open Sans', sans-serif;} svg{width:30%;}</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt; &lt;svg id="animated" viewbox="0 0 100 100"&gt; &lt;circle cx="50" cy="50" r="45" fill="#FDB900"/&gt; &lt;path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff" stroke-dasharray="251.2,0" d="M50 10 a 40 40 0 0 1 0 80 a 40 40 0 0 1 0 -80"&gt; &lt;animate attributeName="stroke-dasharray" from="0,251.2" to="251.2,0" dur="5s"/&gt; &lt;/path&gt; &lt;text id="count" x="50" y="50" text-anchor="middle" dy="7" font-size="20"&gt;100%&lt;/text&gt; &lt;/svg&gt;</code></pre> </div> </div> <p></p> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/29350504/HTML/CSS:%20Percent%20circle%20indicator/29512804">Stack Overflow</a>.</p>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus