Skip to content

pguso/js-plugin-circliful

Repository files navigation

Circle Statistics

Test it https://stackblitz.com/edit/js-2m2bs7

New implementation of circliful, without any dependencies - dependencies are only used for development like webpack, jest, typescript, tslint and babel.

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

How to use circliful

Include circliful to your Site via script tag. If you want to use font-awesome icons you need to include the files separately.

Github clone / download

<link href="dist/main.css" rel="stylesheet" type="text/css" />

<div id="circle"></div>

<script src="dist/circliful.js"></script>
<script>
    circliful.newCircle({
        percent: 50,
        id: 'circle',
        type: 'simple',
    });
</script>

npm package

npm i js-plugin-circliful
import {circliful} from 'js-plugin-circliful';

circliful.newCircle({
  percent: 50,
  id: 'circle',
  type: 'simple',
});
@import 'js-plugin-circliful/dist/main.css';
<div id="circle"></div>

Documentation

If you feel there is something missing in the documentation or the library please open a issue.

Donation

If you find this plugin useful or/and use it commercially feel free to donate me a cup of coffee :)