changed circliful from canvas to svg

Author: Patric Gutersohn

README.md

@@ -2,9 +2,9 @@ jquery-plugin-circliful
 =======================
 
 - show Infos as Circle Statistics, no images used
-- based on html5 canvas and jquery
-- many options can be set as data attributes
-- fontawesome integration
+- based on SVG and jquery
+- many options can be set
+- fully responsive
 
 
 How to use circliful
@@ -17,64 +17,45 @@ Include circliful & jquery to your Site
 	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 	<script src="js/jquery.circliful.min.js"></script>
 
-If you want to use the fontawesome icons you also need to include the css file into your site.
 
+Add an element to your Site with a unique id and an "container" arround it that controls the size of your circle statistic, here a example with bootstrap:
 
-Add an element to your Site with a unique id an the data attributes that you need, for Example:
-
-	<div id="myStat" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd" data-total="200" data-part="35" data-icon="long-arrow-up" data-icon-size="28" data-icon-color="#fff"></div>
+	<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() {
-			$('#myStat').circliful();
+			$("#your-circle").circliful({
+            animationStep: 5,
+            foregroundBorderWidth: 5,
+            backgroundBorderWidth: 15,
+            percent: 75
+        });
 	    });
 	</script>
 
 
-Data Options (Attributes)
+Options
 -------------------------
 
-you can set the options easily as data attributes for Example: data-dimension="250"
-
 | Option        | Description           | Type           | Default  |
 | ------------- |:-------------:| -----:|-----:|
-| dimension     | is the height and width of the element | Pixel | 200px on 200px |
-| text      | will be displayed inside of the circle over the info element      |   string | - |
-| info | will be displayed inside of the circle bellow the text element (can be empty if you don't want to show info text)      |    string | - |
-| width     | is the size of circle | Pixel | 15 |
-| fontsize     | is the font size for the text element | Pixel | 15 |
-| percent     | can be 1 to 100 | Pixel | integer | - |
-| fgcolor     | is the foreground color of the circle | RGB | #556b2f |
-| bgcolor     | is the background color of the cicle | RGB | #eee |
-| fill     | is the background color of the whole circle (can be empty if you don't want to set a background to the whole circle) | RGB | - |
-| type     | full or half circle for example data-type="half" if not set the circle will be a full circle | string | full |
-| total     | If you want to display the percentage of a value for example you have 750MB Ram and at the moment are 350MB in use. You need to set data-total="750" and data-part="350" and the circle will show the percentage value 36,85% | Percent | - |
-| part     | - | Percent | - |
-| border     | Will change the styling of the circle. The line for showing the percentage value will be displayed inline or outline. | string | default |
-| icon     | Fontawesome icon class without the fa- before the class for example not fa-plus just plus | Font Awesome | - |
-| iconsize     | Will set the font size of the icon. | interger | - |
-| iconcolor     | Will set the font color of the icon. | RGB | - |
-| animationstep     | Will set the animation step, use 0 to disable animation, 0.5 to slow down, 2 to speed up, etc | interger | 1 |
-| startdegree     | is the degree to start animate fgcolor | interger | 0 |
-| bordersize     | set the width of the border | interger | 10 |
-| delay     | set animation delay | interger | 0 |
-
-
+| foregroundColor     | color of the foreground circle (no color add value 'none') | RGB or string | #3498DB  |
+| backgroundColor   | color of the background circle (no color add value 'none') |   RGB or string | #eee |
+| fillColor | fill color of circle      | RGB or string | none |
+| foregroundBorderWidth     | width of foreground circle border | int | 15 |
+| backgroundBorderWidth     | width of background circle border | int | 15 |
+| percent     | can be 1 to 100 | Pixel | integer | 75 |
+| animation     | if the circle should be animated initialy | int | 1 |
+| animationStep     | can be 1 to 100, how fast or slow the animation should be | int | 5 |
+| percent     | can be 1 to 100 | Pixel | integer | 75 |
 
 Examples
 --------
-
-##### Small Border Width
-![full](https://raw.github.com/pguso/jquery-plugin-circliful/master/preview/small-border-width.png)
-
-##### Circle
-![full](https://raw.github.com/pguso/jquery-plugin-circliful/master/preview/full-cicle.PNG)
-
-##### Filled Circle
-![filled](https://raw.github.com/pguso/jquery-plugin-circliful/master/preview/full-cicle-filled.PNG)
-
-##### Half Circle Filled
-![half](https://raw.github.com/pguso/jquery-plugin-circliful/master/preview/half-cicle.PNG)
+![full](https://raw.github.com/pguso/jquery-plugin-circliful/master/preview/preview.png)
 

css/circliful.css

@@ -0,0 +1,45 @@
+/* Import the Google Font 'Lato' */
+@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
+
+/* Container styles */
+body {
+    background-color: #fff;
+    color: #333;
+    font-family: 'Lato', sans-serif;
+}
+
+.outer {
+    fill: transparent;
+    stroke: #333;
+    stroke-width: 19.8;
+    stroke-dasharray: 534;
+    transition: stroke-dashoffset 1s;
+    -webkit-animation-play-state: running;
+    /* firefox bug fix - won't rotate at 90deg angles */
+    -moz-transform: rotate(-89deg) translateX(-190px);
+}
+
+/* full circle 25 empty 534 */
+.inner {
+    fill: transparent;
+    stroke: orange;
+    stroke-width: 20;
+    stroke-dasharray: 534;
+    transition: stroke-dashoffset 1s;
+    -webkit-animation-play-state: running;
+    /* firefox bug fix - won't rotate at 90deg angles */
+    -moz-transform: rotate(-89deg) translateX(-190px);
+    stroke-dashoffset: 0;
+}
+
+.circliful {
+    overflow: visible !important;
+
+}
+
+.svg-container {
+    width: 100%;
+    background: #fff;
+    margin: 0 auto;
+    overflow: visible;
+}