FEATURE - Progress svg path with linear gradient

README.md

@@ -33,6 +33,9 @@ If you're using SystemJS as your module loader, there is also a UMD bundle at `.
 | `max`          | The progress' maximum value.                                                                              | Yes       | `undefined`       | `number`          |
 | `radius`       | Radius of the circle.                                                                                     | No        | `125`             | `number`          |
 | `color`        | The color of the `current` value on the circle.                                                           | No        | `#45ccce`         | `string`          |
+| `gradStartColor`   | The start color of the linear gradient on the circle line.                                                           | No        | `undefined`         | `string`          |
+| `gradEndColor`   | The end color of the linear gradient on the circle line.                                                           | No        | `undefined`         | `string`          |
+| `gradDirection`   | The direction of the linear gradient on the circle line.                                                           | No        | `left`         | `string` ["top", "right", "bottom", "left"]          |
 | `background`   | Color of the circle's background.                                                                         | No        | `#eaeaea`         | `string`          |
 | `stroke`       | Specifies the circle's thickness.                                                                         | No        | `15`              | `number`          |
 | `semicircle`   | Whether the progressbar should be a full circle or a semicircle.                                          | No        | `false`           | `boolean`         |
@@ -55,7 +58,9 @@ If you're using SystemJS as your module loader, there is also a UMD bundle at `.
 <round-progress
     [current]="current"
     [max]="max"
-    [color]="'#45ccce'"
+    [gradStartColor]="'#45ccce'"
+    [gradEndColor]="'#ff5900'"
+    [gradDirection]="'right'"
     [background]="'#eaeaea'"
     [radius]="125"
     [stroke]="20"

demo/demo.html

@@ -17,11 +17,12 @@ <h2>Sample progressbar</h2>
       [rounded]="rounded"
       [responsive]="responsive"
       [clockwise]="clockwise"
-      [color]="gradient ? 'url(#gradient)' : color"
+      [color]="'blue'"
       [background]="background"
       [duration]="duration"
       [animation]="animation"
-      [animationDelay]="animationDelay"></round-progress>
+	  [animationDelay]="animationDelay"
+	  [endMarker]="true"></round-progress>
   </div>
 
   <button (click)="increment();">Increment</button>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-svg-round-progressbar",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Angular module that uses SVG to create a circular progressbar",
   "scripts": {},
   "repository": {

src/round-progress.component.ts

@@ -14,25 +14,53 @@ import {RoundProgressService} from './round-progress.service';
 import {ROUND_PROGRESS_DEFAULTS, RoundProgressDefaults} from './round-progress.config';
 import {RoundProgressEase} from './round-progress.ease';
 
+const GRAD_STROKE = "gradFill";
+const DIRECTIONS = ["top", "right", "bottom", "left"];
+const X1_POS = [0, 0, 0, 100];
+const X2_POS = [0, 100, 0, 0];
+const Y1_POS = [100, 0, 0, 0];
+const Y2_POS = [0, 0, 100, 0];
+
+
 @Component({
   selector: 'round-progress',
   template: `
     <svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="_viewBox">
+      <defs>
+        <linearGradient 
+          id="${GRAD_STROKE}" 
+          [attr.x1]="resolveGradCorner('x1')"
+          [attr.x2]="resolveGradCorner('x2')"
+          [attr.y1]="resolveGradCorner('y1')"
+          [attr.y2]="resolveGradCorner('y2')"
+          >
+          <stop offset="0%" [attr.stop-color]="gradStartColor" stop-opacity=".75" />
+          <stop offset="100%" [attr.stop-color]="gradEndColor" stop-opacity=".75" />
+        </linearGradient>
+      </defs>
       <circle
         fill="none"
         [attr.cx]="radius"
         [attr.cy]="radius"
         [attr.r]="radius - stroke / 2"
         [style.stroke]="resolveColor(background)"
-        [style.stroke-width]="stroke"/>
-
+		[style.stroke-width]="stroke"/>
+		
       <path
         #path
         fill="none"
         [style.stroke-width]="stroke"
-        [style.stroke]="resolveColor(color)"
         [style.stroke-linecap]="rounded ? 'round' : ''"
-        [attr.transform]="getPathTransform()"/>
+        [attr.transform]="getPathTransform()"
+		[attr.stroke]="resolveStroke()"/>
+
+		<circle 
+			*ngIf="endMarker"
+			[attr.fill]="resolveDotColor()" 
+			[attr.cx]="resolveDotX()" 
+			[attr.cy]="resolveDotY()" 
+			[attr.r]="stroke*0.8" 
+			style="stroke-width: 0;"></circle>
     </svg>
   `,
   host: {
@@ -145,6 +173,48 @@ export class RoundProgressComponent implements OnChanges {
     return this._service.resolveColor(color);
   }
 
+  /** Resolves the color or the linear gradient for the progress stroke  */
+  resolveStroke(){
+    return !this._useGrad ? this.resolveColor(this.color) : `url(#${GRAD_STROKE})`;
+  }
+
+  resolveDotColor(){
+	  return !this._useGrad ? this.resolveColor(this.color) : this.gradEndColor;
+  }
+
+  resolveDotX(){
+	const allCoords = this._service.getArc(this.current,
+		this.max, this.radius - this.stroke / 2, this.radius, this.semicircle);
+	const pathElements = allCoords.split(" ");
+	return pathElements[1];
+  }
+
+  resolveDotY(){
+	const allCoords = this._service.getArc(this.current,
+		this.max, this.radius - this.stroke / 2, this.radius, this.semicircle);
+	const pathElements = allCoords.split(" ");
+	return pathElements[2];
+  }
+
+  /** Resolves linear gradient direction */
+  resolveGradCorner(corner): string{
+    if (!this._useGrad) return "0%";
+    let index = DIRECTIONS.indexOf(this.gradDirection);
+    if (index < 0) index = DIRECTIONS.indexOf(this._defaults.gradDirection);
+    let perc = 0;
+    switch (corner){
+      case 'x1':
+        perc = X1_POS[index]; break;
+      case 'x2':
+        perc = X2_POS[index]; break;
+      case 'y1':
+        perc = Y1_POS[index]; break;
+      case 'y2':
+        perc = Y2_POS[index]; break;
+    }
+    return perc+"%";
+  }
+
   /** Change detection callback. */
   ngOnChanges(changes): void {
     if (changes.current) {
@@ -179,6 +249,11 @@ export class RoundProgressComponent implements OnChanges {
     }
   }
 
+  get _useGrad():boolean {
+    return this.gradStartColor!==undefined && this.gradEndColor!==undefined;
+  }
+
+
   @ViewChild('path')         _path;
   @Input() current:          number;
   @Input() max:              number;
@@ -188,10 +263,14 @@ export class RoundProgressComponent implements OnChanges {
   @Input() duration:         number = this._defaults.duration;
   @Input() stroke:           number = this._defaults.stroke;
   @Input() color:            string = this._defaults.color;
+  @Input() gradStartColor:   string;
+  @Input() gradEndColor:     string;
+  @Input() gradDirection:    string = this._defaults.gradDirection;
   @Input() background:       string = this._defaults.background;
   @Input() responsive:       boolean = this._defaults.responsive;
   @Input() clockwise:        boolean = this._defaults.clockwise;
   @Input() semicircle:       boolean = this._defaults.semicircle;
   @Input() rounded:          boolean = this._defaults.rounded;
+  @Input() endMarker:          boolean = this._defaults.endMarker;
   @Output() onRender:        EventEmitter<number> = new EventEmitter();
 }

src/round-progress.config.ts

@@ -12,11 +12,13 @@ export const ROUND_PROGRESS_DEFAULTS_PROVIDER: Provider = {
     duration: 500,
     stroke: 15,
     color: '#45CCCE',
+    gradDirection: 'left',
     background: '#EAEAEA',
     responsive: false,
     clockwise: true,
     semicircle: false,
-    rounded: false
+	rounded: false,
+	endMarker: false
   }
 };
 
@@ -27,9 +29,11 @@ export interface RoundProgressDefaults {
   duration?: number;
   stroke?: number;
   color?: string;
+  gradDirection?:string;
   background?: string;
   responsive?: boolean;
   clockwise?: boolean;
   semicircle?: boolean;
   rounded?: boolean;
+  endMarker?: boolean;
 }

src/round-progress.service.ts

@@ -66,6 +66,10 @@ export class RoundProgressService {
     return `M ${start} A ${pathRadius} ${pathRadius} 0 ${arcSweep} 0 ${end}`;
   };
 
+  getDotCoords(){
+
+  }
+
   /**
    * Converts polar cooradinates to Cartesian.
    * @param elementRadius  Radius of the wrapper element.