jquery-plugin-circliful

• show Infos as Circle Statistics, no images used
• based on SVG and jquery
• many options can be set
• fully responsive

How to use circliful

Include circliful & jquery to your Site.

<link href="css/jquery.circliful.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="js/jquery.circliful.min.js"></script>

It's tested up to jQuery Versions:

• 1.12.4
• 2.2.4
• 3.1.0

Test it directly on JS Fiddle https://jsfiddle.net/9dajqcr1/

Add an element to your Site with a unique id and an "container" around it that controls the size of your circle statistic, here a example with bootstrap:

<div class="row">
    <div class="col-lg-2">
        <div id="test-circle"></div>
    </div>
</div>

Add this code at the end of your site

<script>
    $( document ).ready(function() {
	$("#your-circle").circliful({
                animationStep: 5,
                foregroundBorderWidth: 5,
                backgroundBorderWidth: 15,
                percent: 75
           });
   });
</script>

Options

Circle

Percentage Text

Icon

Data Attributes

All Options can also be set as data attributes, for example:

<div id="test-circle" data-animation="1" data-animationStep="5" data-percent="58"></div>

Half Circle

Example:

$("#test-circle5").circliful({
    animationStep: 5,
    foregroundBorderWidth: 5,
    backgroundBorderWidth: 15,
    percent: 80,
    halfCircle: 1,
});

Multiple Bars

Example:

$("#test-circle").circliful({
        animation: 1,
        animationStep: 5,
        foregroundBorderWidth: 7,
        backgroundBorderWidth: 7,
        textSize: 28,
        textStyle: 'font-size: 12px;',
        textColor: '#666',
        multiPercentage: 1,
        percentages: [
        	{'percent': 10, 'color': '#3180B8', 'title': 'Gryffindor' },
		{'percent': 30, 'color': '#4ADBEA', 'title': 'Ravenclaw' },
		{'percent': 50, 'color': '#49EBA8', 'title': 'Hufflepuff' },
		{'percent': 70, 'color': '#FFCA35', 'title': 'Slytherin' }
        ],
        multiPercentageLegend: 1,
    replacePercentageByText: '',
        backgroundColor: '#eee',
        icon: 'f0d0',
        iconPosition: 'middle',
        iconColor: '#273B4E'
    });

In action: https://jsfiddle.net/0c8qaqaj/41/

Use callback function

Gets fired on complete.

Example:

$("#circli").circliful({
        animation: 1,
        animationStep: 10,
        foregroundBorderWidth: 5,
        backgroundColor: "none",
        fillColor: '#eee',
        percent: 75,
        iconColor: '#3498DB',
        icon: 'f206',
        iconSize: '40',
        iconPosition: 'middle',
        start:50,
        showPercent:1,
        target:0
    }, function(){
        alert('done !');
    });

Font Awesome Usage

Go to https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css and copy/paste the string after the slash for Example hdd icon:

.fa-hdd-o:before {
    content: "\f0a0";
}

copy/paste f0a0 into the parameter field { icon: 'f0a0' }

Sign or icon before percentage

Example with sign:

$("#test-circle1").circliful({
    animationStep: 5,
    percent: 80,
    beforePercent: '+'
});

Example with icon:

$("#test-circle1").circliful({
    animationStep: 5,
    percent: 80,
    beforePercent: 'f0a0'
});

Circle with rounded ends

Example:

$("#test-circle1").circliful({
    percent: 80,
    strokeLinecap: 'round'
});

Examples

Donation

If you find this plugin usefull or/and use it commercially please donate as much as you like.