Add new features: internal circle and custom stroke for background circle

README.md

@@ -35,6 +35,7 @@ If you're using SystemJS as your module loader, there is also a UMD bundle at `.
 | `color`        | The color of the `current` value on the circle.                                                           | No        | `#45ccce`         | `string`          |
 | `background`   | Color of the circle's background.                                                                         | No        | `#eaeaea`         | `string`          |
 | `stroke`       | Specifies the circle's thickness.                                                                         | No        | `15`              | `number`          |
+| `strokeBackground` | Specifies the background circle's thickness.                                                          | No        | the stroke value  | `number`          |
 | `semicircle`   | Whether the progressbar should be a full circle or a semicircle.                                          | No        | `false`           | `boolean`         |
 | `clockwise`    | Whether the progressbar should rotate clockwise or counter-clockwise.                                     | No        | `true`            | `boolean`         |
 | `responsive`   | Whether the progressbar should fit inside its parent container. **Note** Turning this option on will override the specified radius in order to make the circle fit in its parent. The radius to stroke ratio won't change.                                     | No        | `false`            | `boolean`           |
@@ -43,6 +44,9 @@ If you're using SystemJS as your module loader, there is also a UMD bundle at `.
 | `animationDelay` | Milliseconds to wait before starting an animation.                                                     | No         | `0`               | `number`          |
 | `onRender`     | Callback function that gets executed every time the circle is animated. The function gets called with the current progress as it is being animated.                                | No        | `undefined`       | `Function`         |
 | `animation`    | The easing function that will be used when animating.                                                     | No        | easeOutCubic      | linearEase <br> easeInQuad <br> easeOutQuad <br> easeInOutQuad <br> easeInCubic <br> easeOutCubic <br> easeInOutCubic <br> easeInQuart <br> easeOutQuart <br> easeInOutQuart <br> easeInQuint <br> easeOutQuint <br> easeInOutQuint <br> easeInSine <br> easeOutSine <br> easeInOutSine <br> easeInExpo <br> easeOutExpo <br> easeInOutExpo <br> easeInCirc <br> easeOutCirc <br> easeInOutCirc <br> easeInElastic <br> easeOutElastic <br> easeInOutElastic <br> easeInBack <br> easeOutBack <br> easeInOutBack <br> easeInBounce <br> easeOutBounce <br> easeInOutBounce <br> |
+| `internalCircle` | Whether the internal circle should be visible.                                                     | No        | `true`      | `boolean` |
+| `internalCircleColor` | The color of the internal circle.                                                     | No        | the color parameter      | `string` |
+| `internalCircleRadius` | Radius of the internal circle.                                                     | No        | `100`      | `string` |
 
 
 ### Minimal example:
@@ -59,13 +63,17 @@ If you're using SystemJS as your module loader, there is also a UMD bundle at `.
     [background]="'#eaeaea'"
     [radius]="125"
     [stroke]="20"
+    [strokeBackground]="10"
     [semicircle]="true"
     [rounded]="true"
     [clockwise]="false"
     [responsive]="false"
     [duration]="800"
     [animation]="'easeInOutQuart'"
     [animationDelay]="0"
+    [internalCircle]="true"
+    [internalCircleColor]="#eaeaea"
+    [internalCircleRadius]="90"
     (onRender)="doSomethingWithCurrentValue($event)"></round-progress>
 ```
 

demo/demo.html

@@ -6,8 +6,6 @@
   <h2>Sample progressbar</h2>
 
   <div class="progress-wrapper">
-    <div class="current" [ngStyle]="getOverlayStyle()">{{ current }}/{{ max }}</div>
-
     <round-progress
       [current]="current"
       [max]="max"
@@ -21,7 +19,13 @@ <h2>Sample progressbar</h2>
       [background]="background"
       [duration]="duration"
       [animation]="animation"
+      [strokeBackground]="strokeBackground"
+      [internalCircle]="internalCircle"
+      [internalCircleColor]="internalColor"
+      [internalCircleRadius]="internalRadius"
       [animationDelay]="animationDelay"></round-progress>
+
+      <div class="current" [ngStyle]="getOverlayStyle()">{{ current }}/{{ max }}</div>
   </div>
 
   <button (click)="increment();">Increment</button>
@@ -73,6 +77,11 @@ <h3>Customize!</h3>
       <input id="stroke" name="stroke" type="number" [(ngModel)]="stroke"/>
     </div>
 
+    <div class="cf">
+      <label for="strokeBackground">Background stroke:</label>
+      <input id="strokeBackground" name="strokeBackground" type="number" [(ngModel)]="strokeBackground"/>
+    </div>
+
     <div class="cf">
       <label for="radius">Radius:</label>
       <input id="radius" name="radius" type="number" [(ngModel)]="radius"/>
@@ -104,6 +113,22 @@ <h3>Customize!</h3>
       <label for="background">Background color:</label>
       <input id="background" name="background" type="color" [(ngModel)]="background"/>
     </div>
+
+    <div class="cf">
+      <label for="internalCircle">Internal circle:</label>
+      <input id="internalCircle" name="internalCircle" type="checkbox" [(ngModel)]="internalCircle"/>
+    </div>
+
+    <div class="cf">
+      <label for="internalRadius">Internal circle radius:</label>
+      <input id="internalRadius" name="internalRadius" type="number" [(ngModel)]="internalRadius"/>
+    </div>
+
+    <div class="cf">
+      <label for="internalColor">Internal circle color:</label>
+      <input id="internalColor" name="internalColor" type="color" [(ngModel)]="internalColor"/>
+    </div>
+
   </form>
 </div>
 

demo/index.html

@@ -1,30 +1,30 @@
 <html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <title>Angular SVG round progressbar demo</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <meta name="description" content="Angular module that uses SVG to create a circular progressbar">
-    <meta name="author" content="Kristiyan Kostadinov">
-    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet">
-    <link rel="stylesheet" href="demo.css">
-  </head>
+<head>
+  <meta charset="UTF-8">
+  <title>Angular SVG round progressbar demo</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="description" content="Angular module that uses SVG to create a circular progressbar">
+  <meta name="author" content="Kristiyan Kostadinov">
+  <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet">
+  <link rel="stylesheet" href="demo.css">
+</head>
 
-  <body>
-    <demo>
-      <div class="loading">Loading</div>
-    </demo>
+<body>
+<demo>
+  <div class="loading">Loading</div>
+</demo>
 
-    <script src="vendor/core-js/client/shim.min.js"></script>
-    <script src="vendor/zone.js/dist/zone.js"></script>
-    <script src="vendor/systemjs/dist/system.src.js"></script>
-    <script src="systemjs.config.js"></script>
+<script src="vendor/core-js/client/shim.min.js"></script>
+<script src="vendor/zone.js/dist/zone.js"></script>
+<script src="vendor/systemjs/dist/system.src.js"></script>
+<script src="systemjs.config.js"></script>
 
-    <script>
-      System.import('systemjs.config.js').then(function() {
-        System.import('main');
-      }).catch(function(err) {
-        console.error(err);
-      });
-    </script>
-  </body>
+<script>
+  System.import('systemjs.config.js').then(function() {
+    System.import('main');
+  }).catch(function(err) {
+    console.error(err);
+  });
+</script>
+</body>
 </html>

demo/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "angular-svg-round-progressbar",
+  "version": "2.0.1",
+  "dependencies": {
+
+  }
+}

demo/src/demo.component.ts

@@ -12,16 +12,20 @@ export class DemoComponent {
   stroke: number = 15;
   radius: number = 125;
   semicircle: boolean = false;
-  rounded: boolean = false;
+  rounded: boolean = true;
   responsive: boolean = false;
   clockwise: boolean = true;
   color: string = '#45ccce';
   background: string = '#eaeaea';
+  strokeBackground: number = 10;
   duration: number = 800;
   animation: string = 'easeOutCubic';
   animationDelay: number = 0;
   animations: string[] = [];
   gradient: boolean = false;
+  internalCircle: boolean = true;
+  internalColor: string = '#eaeaea';
+  internalRadius: number = 100;
   realCurrent: number = 0;
 
   constructor(private _ease: RoundProgressEase) {

gulp/demo.js

@@ -15,15 +15,15 @@ gulp.task('demo:gh-pages', () => gulp.src(path.join(DEMO, '**/*')).pipe(ghPages(
 gulp.task('demo:ts', compile.tsc(DEMO));
 
 gulp.task('demo:assets', copy(
- 'node_modules',
- path.join(DEMO, 'vendor'),
- [
-  '@angular/**/*.umd.js',
-  'core-js/client/*.min.+(js|js.map)',
-  'rxjs/**/*.+(js|js.map)',
-  'systemjs/dist/*.js',
-  'zone.js/dist/*.js'
- ]
+    'node_modules',
+    path.join(DEMO, 'vendor'),
+    [
+      '@angular/**/*.umd.js',
+      'core-js/client/*.min.+(js|js.map)',
+      'rxjs/**/*.+(js|js.map)',
+      'systemjs/dist/*.js',
+      'zone.js/dist/*.js'
+    ]
 ));
 
 gulp.task('demo:build', done => {