/jquery-circliful-npm

An npm package for jQuery circle statistic plugin https://jsfiddle.net/9dajqcr1/

Primary LanguageCSS

jquery-circliful

An npm package for jQuery circle statistic plugin.

Exmples: https://jsfiddle.net/9dajqcr1/

Install

npm install jquery-circliful

Setup

require('jquery-circliful')(window, $);

Or include ./js/jquery.circliful.js to your scrip.

Add stylesheets from ./css to your Site.

How to use

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>

More information on plugins repository: https://github.com/pguso/jquery-plugin-circliful