P e r c e n t i f y
Pure CSS3 Percentage Circle with icons and custom content support
Run Examples
Download repository
$ git clone https://github.com/pradeep1991singh/percentify.git
Run
$ cd percentify$ yarn install$ npm run start
Usage
dist
folder in your project And then add css file in head tag of html file
Copy/Paste
Then add Percentage Circle template
<!-- With Android Icon --> <!-- With Custom text --> 80% <!-- Template details percentify: will define percentage main element p33: percentage of circle need to fill i.e. 33% cfs100: circle size i.e. 100px, range 12px-500px orange: orange theme thinner: border size, available thin, thinner or by default normal hover: for hover effects active: make circle inner content active i.e. as theme is orange it will make inner content color orange android-icon: android icon class name ifs25: icon size i.e. 25px, range 12px-500px text: custom text class name-->
Percentage Counter Circle Example
0% Percentage Progress Circle