percentify-circle

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

Copy/Paste dist folder in your project And then add css file in head tag of html file

<link rel="stylesheet" href="dist/percentify.css">

Then add Percentage Circle template

<!-- 	With Android Icon -->
<div class="percentify p33 cfs100 orange active">
    <span class="android-icon ifs25"></span>
    <div class="slice">
        <div class="bar"></div>
        <div class="fill"></div>
    </div>
</div>
 
<!-- 	With Custom text -->
<div class="percentify p80 cfs200 thinner hover active">
    <span class="text ifs50">80%</span>
    <div class="slice">
        <div class="bar"></div>
        <div class="fill"></div>
    </div>
</div>
 
<!-- 	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

<script src="/dist/percentage-counter.js"></script>
<script src="/dist/scripts/percentage-counter.js"></script>
<div class="percentify p0 cfs400 green">
    <span class="text ifs100">0%</span>
    <div class="slice">
        <div class="bar"></div>
        <div class="fill"></div>
    </div>
</div>
<label for="example-android-icon" class="label label-example">
    <code>Percentage Progress Circle</code>
</label>
<script>
    window.onload = function () {
        percentify.percentageCounter({});
    };
</script> 
 

Demo

Demo Examples