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

Filling up a circle progress bar

web-tiki
May 12, 2015
<p>You could handle the animation with transforms and transitions : (Hover the circle)</p> <p></p><div class="snippet"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#count{ position:relative; border-radius:50%; overflow:hidden; line-height:200px; width:200px; text-align:center; background:#000; color:#fff; z-index:1; } #count span{ position:absolute; top:0; left:0; width:100%; height:100%; background: red; z-index:-1; transform:scaleY(0.001); transition:transform 3s; transform-origin:50% 100%; } #count:hover span{ transform:scaleY(1); }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="count"&gt;100%&lt;span&gt;&lt;/span&gt;&lt;/div&gt;</code></pre> </div> </div> <p></p> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/30138369/Filling%20up%20a%20circle%20progress%20bar/30138986">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