Version 1.1.2

- line cap
- gradient angle
- gradient direction
- gradient stop point custom position

Author: kottenator

README.md

@@ -43,7 +43,8 @@ You should specify options like in usage example above.
 | startAngle | Initial angle (for `0` value) <br> Default: `-Math.PI` |
 | reverse | Reverse animation and arc draw<br> Default: `false` |
 | thickness | Width of the arc. By default it's automatically calculated as 1/14 of `size` but you may set your own number <br> Default: `"auto"` |
-| fill | The arc fill config. You may specify next: <br>- `{ gradient: ["red", "green", "blue"] }` <br>- `{ color: "#ff1e41" }` <br>- `{ image: "http://i.imgur.com/pT0i89v.png" }`<br>- `{ image: imageInstance }`<br>- `{ color: "lime", image: "http://i.imgur.com/pT0i89v.png" }` <br> Default: `{ gradient: ["#3aeabb", "#fdd250"] }` |
+| lineCap | Arc line cap (`"butt"`, `"round"` or `"square"`)) <br> Default: `"butt"`
+| fill | The arc fill config. You may specify next:  <br>- `{ color: "#ff1e41" }` <br>- `{ color: 'rgba(255, 255, 255, .3)' }` <br>- `{ gradient: ["red", "green", "blue"] }` <br>- `{ gradient: [["red", .2], ["green", .3], ["blue", .8]] }` <br>- `{ gradient: ["red", "orange"], gradientAngle: Math.PI / 4 }` <br>- `{ gradient: ["red", "orange"], gradientDirection: [x0, y0, x1, y1] }` <br>- `{ image: "http://i.imgur.com/pT0i89v.png" }`<br>- `{ image: imageInstance }`<br>- `{ color: "lime", image: "http://i.imgur.com/pT0i89v.png" }` <br> Default: `{ gradient: ["#3aeabb", "#fdd250"] }` |
 | emptyFill | Color of the "empty" arc. Only a color fill supported by now <br> Default: `"rgba(0, 0, 0, .1)"` |
 | animation | Animation config. See [jQuery animations](http://api.jquery.com/animate/). <br> You may also set it to `false` <br> Default: `{ duration: 1200, ease: "circleProgressEase" }`  <br> `"circleProgressEase"` *is just a ease-in-out-cubic easing* |
 | animationStartValue | Default animation starts at `0.0` and ends at specified `value`. Let's call this direct animation. If you want to make reversed animation then you should set `animationStartValue` to `1.0`. Also you may specify any other value from `0.0` to `1.0` <br> Default: `0.0`

bower.json

@@ -1,6 +1,6 @@
 {
     "name": "jquery-circle-progress",
-    "version": "1.1.1",
+    "version": "1.1.2",
     "authors": [
         "Rostyslav Bryzgunov <[email protected]>"
     ],

dist/circle-progress.js

@@ -3,7 +3,7 @@ jquery-circle-progress - jQuery Plugin to draw animated circular progress bars
 
 URL: http://kottenator.github.io/jquery-circle-progress/
 Author: Rostyslav Bryzgunov <[email protected]>
-Version: 1.1.1
+Version: 1.1.2
 License: MIT
 */
 (function($) {
@@ -43,8 +43,8 @@ License: MIT
          *     - { color: '#3aeabb' }
          *     - { color: 'rgba(255, 255, 255, .3)' }
          *   - linear gradient (left to right):
-         *     - { gradient: ['#3aeabb', '#fdd250'] }
-         *     - { gradient: ['red', 'green', 'blue'] }
+         *     - { gradient: ['#3aeabb', '#fdd250'], gradientAngle: Math.PI / 4 }
+         *     - { gradient: ['red', 'green', 'blue'], gradientDirection: [x0, y0, x1, y1] }
          *   - image:
          *     - { image: 'http://i.imgur.com/pT0i89v.png' }
          *     - { image: imageObject }
@@ -82,6 +82,13 @@ License: MIT
          */
         reverse: false,
 
+        /**
+         * Arc line cap ('butt' (default), 'round' and 'square')
+         * Read more: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.lineCap
+         * @type {string}
+         */
+        lineCap: 'butt',
+
         //-------------------------------------- protected properties and methods --------------------------------------
         /**
          * @protected
@@ -171,12 +178,32 @@ License: MIT
 
             if (fill.gradient) {
                 var gr = fill.gradient;
+
                 if (gr.length == 1) {
                     this.arcFill = gr[0];
                 } else if (gr.length > 1) {
-                    var lg = ctx.createLinearGradient(0, 0, size, 0);
-                    for (var i = 0; i < gr.length; i++)
-                        lg.addColorStop(i / (gr.length - 1), gr[i]);
+                    var ga = fill.gradientAngle || 0, // gradient direction angle; 0 by default
+                        gd = fill.gradientDirection || [
+                            size / 2 * (1 - Math.cos(ga)), // x0
+                            size / 2 * (1 + Math.sin(ga)), // y0
+                            size / 2 * (1 + Math.cos(ga)), // x1
+                            size / 2 * (1 - Math.sin(ga))  // y1
+                        ];
+
+                    var lg = ctx.createLinearGradient.apply(ctx, gd);
+
+                    for (var i = 0; i < gr.length; i++) {
+                        var color = gr[i],
+                            pos = i / (gr.length - 1);
+
+                        if ($.isArray(color)) {
+                            pos = color[1];
+                            color = color[0];
+                        }
+
+                        lg.addColorStop(pos, color);
+                    }
+
                     this.arcFill = lg;
                 }
             }
@@ -221,8 +248,8 @@ License: MIT
         drawFrame: function(v) {
             this.lastFrameValue = v;
             this.ctx.clearRect(0, 0, this.size, this.size);
-            this.drawArc(v);
             this.drawEmptyArc(v);
+            this.drawArc(v);
         },
 
         /**
@@ -245,6 +272,7 @@ License: MIT
             }
 
             ctx.lineWidth = t;
+            ctx.lineCap = this.lineCap;
             ctx.strokeStyle = this.arcFill;
             ctx.stroke();
             ctx.restore();

package.json

@@ -1,6 +1,6 @@
 {
     "name": "jquery-circle-progress",
-    "version": "1.1.1",
+    "version": "1.1.2",
     "author": "Rostyslav Bryzgunov <[email protected]>",
     "description": "Plugin to draw animated circular progress bars",
     "license": "MIT",