Pure CSS Percentage Circle

As I’m working on my first dashboard project recently, I pay great attention to building DOM elements with animations.

Here I have found a great website about simple percentage circle: http://circle.firchow.net/. You can also check out the source code on Github: https://github.com/afuersch/css-percentage-circleA few things you need to know before starting to build a percentage circle by yourself:

A few things that you need to know before starting to build a percentage circle by yourself: clearfix, transform, hover, before&after. “clearfix” is a class when you are using float layout, to automatically clear all child elements of one element. “transform” is the degree to rotate a CSS element. “hover” is when your mouse just moves onto one element, it may render some changes. “before” and “after” are CSS pseudo elements, which are not real elements on index.html, and you can induce some actions for them.

A complete animated percentage circle includes its outer circle, the bar, the percentage number, the filled color inside of the circle, before and after elements, and the clearfix keyword.

Right now I myself is pondering over the source code to understand each line of it. I know that I can just use it instead of reinventing the wheels, but I think it’s better to know the fundamentals and then build fancy visualizations myself.