pguso/js-plugin-circliful

javascript circle statistic plugin

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

• Api
• Create custom circle
• Setup dev enviroment (with webpack)
• List of available options
• Style your cirles via css

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 :)