diff --git a/README.md b/README.md
index 8629cfe..781ad3f 100644
--- a/README.md
+++ b/README.md
@@ -1,45 +1,42 @@
-# README #
+# js-plugin-circliful #
New implementation of circliful, without any dependencies - dependencies are only used for development.
-### Run dev environment ###
+* show Infos as Circle Statistics, no images used
+* based on SVG
+* many options can be set
+* fully responsive
-Install devDependencies
-~~~~
-npm install
-~~~~
+## How to use circliful
-Run webpack dev server
-~~~~
-npm run start:dev
-~~~~
+Include circliful to your Site via script tag or install it as npm module.
-In the console you should see something like: "Project is running at http://localhost:9090/" call the url in the browser.
+ //copy from dist folder
+
+
+
-### Build javascript files ###
+
+
-~~~~
-npm run build
-~~~~
+## Documentation
-### Project structure ###
+* [Api](./docs/api.md)
+* [Create custom circle](./docs/create-new-circle.md)
+* [Setup dev enviroment (with webpack)](./docs/dev-environment.md)
+* [List of available options](./docs/options.md)
+* [Style your cirles via css](./docs/style-elements.md)
-| Folder | Description |
-| ------------- |-------------|
-| dist | minified css and js version for implementing in script tag |
-| docs | md documentation files |
-| public | content-base for webpack dev server, contains some circliful examples |
-| src | all code for the library |
-| style | scss styling files for circles |
-| test | unit and dom tests, coming soon... |
-
-#### src folder ####
-
-| Folder | Description |
-| ------------- |-------------|
-| base-class | basic classes to centralize main features |
-| circle-type | some default circles, you can add there your own |
-| helper | svg and object helper |
-| interface | typescript interfaces for validation |
+If you feel there is something missing in the documentation or the library feel free to open a issue.
+Donation
+--------
+If you find this plugin useful or/and use it commercially feel free to donate me a cup of coffee :)
+[![](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=D3F2MMNDHQ9KQ)
diff --git a/dist/circliful.js b/dist/circliful.js
deleted file mode 100644
index fa58e66..0000000
--- a/dist/circliful.js
+++ /dev/null
@@ -1,2 +0,0 @@
-var circliful=function(t){var e={};function i(r){if(e[r])return e[r].exports;var s=e[r]={i:r,l:!1,exports:{}};return t[r].call(s.exports,s,s.exports,i),s.l=!0,s.exports}return i.m=t,i.c=e,i.d=function(t,e,r){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var s in t)i.d(r,s,function(e){return t[e]}.bind(null,s));return r},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="/dist/",i(i.s="./src/index.ts")}({"./src/api.ts":function(t,e,i){"use strict";i.r(e),i.d(e,"Api",(function(){return n}));var r=i("./src/base-class/circle.ts"),s=i("./src/helper/object-helper.ts"),n=function(){function t(t){this.options=t}return t.prototype.update=function(t){var e=this,i=document.getElementById("svg-"+this.options.id);Array.isArray(t)?t.forEach((function(t){return e.updateType(t.type,t.value)})):this.updateType(t.type,t.value),i.innerHTML="",r.default.initializeCircleType(this.options)},t.prototype.updateType=function(t,e){switch(t){case"percent":this.options.percent=Number(e);break;case"point":this.options.point=Boolean(e);break;case"animation":this.options.animation=Boolean(e);break;case"pointSize":this.options.pointSize=Number(e);break;case"animationStep":this.options.animationStep=Number(e);break;case"strokeGradient":this.options.strokeGradient=e;break;case"icon":this.options.icon=String(e);break;case"text":this.options.text=String(e);break;case"textReplacesPercentage":this.options.textReplacesPercentage=Boolean(e);break;case"foregroundCircleWidth":this.options.foregroundCircleWidth=Number(e);break;case"backgroundCircleWidth":this.options.backgroundCircleWidth=Number(e);break;case"additionalCssClasses":this.options.additionalCssClasses=e;break;case"progressColors":console.log("value",e),this.options.progressColors=e}},t.prototype.get=function(t){return s.default.extractPropertyFromObject(this.options,t)},t}()},"./src/base-class/base-circle.ts":function(t,e,i){"use strict";i.r(e),i.d(e,"BaseCircle",(function(){return n}));var r=i("./src/base-class/svg-tags.ts"),s=function(){return(s=Object.assign||function(t){for(var e,i=1,r=arguments.length;ie},t.prototype.drawContainer=function(t){console.log(t);var e=this.getViewBoxParams(),i=e.minX,n=e.minY,o=e.width,a=e.height,c=r.default.addSvg(s({width:"100%",height:"100%",viewBox:i+" "+n+" "+o+" "+a,id:"svg-"+this.options.id,preserveAspectRatio:"xMinYMin meet"},t));this.tags.push({element:c,parentId:this.options.id})},t.prototype.getViewBoxParams=function(){var t=this.options,e=t.foregroundCircleWidth,i=t.backgroundCircleWidth,r=i;e>i&&(r=e);var s=this.size.width,n=this.size.height;return(e>5||i>5)&&(s=this.size.width+1.5*r,n=this.size.height+1.5*r),{minX:0,minY:0,width:s,height:n}},t.prototype.append=function(){this.tags.forEach((function(t){document.getElementById(t.parentId).appendChild(t.element)}))},t.prototype.initialize=function(t,e){this.options=t,this.size=e},t}()},"./src/base-class/circle-factory.ts":function(t,e,i){"use strict";i.r(e),i.d(e,"CircleFactory",(function(){return o}));var r=i("./src/circle-type/half-circle.ts"),s=i("./src/circle-type/plain-circle.ts"),n=i("./src/circle-type/simple-circle.ts"),o=function(){function t(){}return t.create=function(t){var e;switch(t.toLowerCase()){case"half":e=new r.default;break;case"plain":e=new s.default;break;case"simple":e=new n.default;break;default:e=new n.default}return e},t}()},"./src/base-class/circle.ts":function(t,e,i){"use strict";i.r(e);var r=i("./src/api.ts"),s=i("./src/base-class/circle-factory.ts"),n=i("./src/base-class/options.ts"),o=function(){function t(){}return t.getParentSize=function(t){var e=document.getElementById(t),i=e.clientWidth>0?e.clientWidth:200,r=e.clientHeight>0?e.clientHeight:200;return{maxSize:i>r?r:i,height:r,width:i}},t.initializeCircleType=function(e,i){void 0===i&&(i=!1);var r=t.getParentSize(e.id),o=s.CircleFactory.create(e.type),a=(new n.default).mergeOptions(e,i);return o.initialize(a,r),o.drawCircle(),o},t.prototype.newCircle=function(e){return t.initializeCircleType(e),new r.Api(e)},t.prototype.newCircleWithDataSet=function(e,i){var s={id:e,type:i,percent:1};return t.initializeCircleType(s,!0),new r.Api(s)},t}();e.default=o},"./src/base-class/options.ts":function(t,e,i){"use strict";i.r(e);var r=function(){return(r=Object.assign||function(t){for(var e,i=1,r=arguments.length;i0,u=1,h=setInterval((function(e,s,a){var d=l/100*u;r.default.setAttributes(e,{d:r.default.describeArc(n.x,n.y,n.radius,c,d)}),p&&t.updateCircleColor(u,e,a),(u+=o)>s&&(clearInterval(h),"function"==typeof i&&i())}),d,s,n.percent,a)},t.updateCircleColor=function(t,e,i){var s=i.find((function(e){return e.percent===t}));s&&r.default.setAttributes(e,{style:"stroke: "+s.color})},t.getMilliseconds=function(t,e){var i=t||50;return e<=180&&(i/=3),i},t}()},"./src/helper/svg-tags-helper.ts":function(t,e,i){"use strict";i.r(e);var r=function(){function t(){}return t.setAttributes=function(t,e){for(var i=0,r=Object.entries(e);i
+
+
+ // javascript call
+ circliful.newCircleWithDataSet('circle', 'simple');
+
+#### Set via config object ####
+
+ // html tag
+
+
+ // javascript call
+ circliful.newCircle({
+ percent: 80,
+ id: 'circle',
+ type: 'simple',
+ icon: 'f179',
+ text: 'TP Wins',
+ noPercentageSign: true,
+ backgroundCircleWidth: 35,
+ foregroundCircleWidth: 20,
+ progressColors: [
+ {percent: 1, color: 'red'},
+ {percent: 30, color: 'orange'},
+ {percent: 60, color: 'green'}
+ ]
+ });
+
+#### Available options ####
+
+| name | default | type | description
+| ------------- |------------- | ----- | ----- |
+| id | / | string | id of the html tag
+| type | "SimpleCircle" | string | circle type
+| additionalCssClasses | / | object | on each element circle, text etc a custom css for styling can be set
+| point | false | boolean | a point in within the circle
+| pointSize | 60 | number | the point size in px
+| percent | 75 | number | the percentage of the circle
+| animation | true | boolean | if set to true, the circle percentage fill will be animated
+| animationStep | 1 | number | the animation speed
+| strokeGradient | / | [string, string] | will give the foreground circle a gradient
+| icon | / | string | font awesome icon definition for example 'f179', you need to integrate the font awesome library its not packed with circliful
+| text | / | string | will be shown below the percentage text
+| textReplacesPercentage | false | boolean | if set to true the text replaces the percentage
+| noPercentageSign | / | boolean | if set to true the % sign will be removed
+| animateInView | false | boolean | animates the circle as soon as its in the viewport
+| strokeLinecap | "butt" | string | the endings of the foreground circle, can be set to "butt" or "round"
+| foregroundCircleWidth | 5 | number | width of the foreground circle
+| backgroundCircleWidth | 15 | number | width of the background circle
+| progressColors | / | IProgressColor[] | the foreground circle changes the color if it comes above the given percentage colors for example [{percent: 50, color: "green"}]
+| onAnimationEnd | / | function | event that will be triggered when animation of circle finished
+
diff --git a/docs/style-elements.md b/docs/style-elements.md
new file mode 100644
index 0000000..0aeb23a
--- /dev/null
+++ b/docs/style-elements.md
@@ -0,0 +1,39 @@
+SVG style changes via CSS
+===================
+
+Change Position of Element
+
+The first argument is the x (horizontal) coordinate and the second argument is the y (vertical) coordinate.
+
+ transform: translate(0, 20px)
+
+Hover Effect
+
+ .circle-container:hover {
+ .background-circle {
+ fill: #ccc; //change background color
+ }
+
+ .foreground-circle {
+ stroke: blueviolet; //change stroke color
+ stroke-width: 8; // change stroke width
+ }
+ }
+
+Change Circle Color
+
+ .foreground-circle or .background-circle {
+ stroke: blueviolet;
+ }
+
+Change background color of Point
+
+ .point-circle {
+ fill: #999;
+ }
+
+Change width of circle
+
+ .foreground-circle or .background-circle {
+ stroke-width: 50px;
+ }
diff --git a/public/index.html b/public/index.html
index 6d6296d..6cd2e94 100644
--- a/public/index.html
+++ b/public/index.html
@@ -114,7 +114,7 @@
animateInView: true
});
- console.log('get', circle7.get('percent'))
+ console.log('get', circle7.get('percent'));
})();