added provision to add static text for replacing progress percentage

Author: justinkx

README.md

@@ -67,6 +67,8 @@ This HTML code demonstrates basic usage of this module:
   [shape]="'rectangle'"
   [borderColor]="'#383a3e'"
   [direction]="'horizontal'"
+  [showMiddleText]="true"
+  [middleTextStyle]="{textSize: 12,text: 'Loading'}"
   [showPercentage]="true"
   [height]="40"
   [progressColor]="'#FF0000'">
@@ -86,6 +88,8 @@ The `<angular-svg-progress />` component takes many attributes that allows you t
 | borderColor | string | Color of the svg progress component border | black |
 | showPercentage | boolean | To show the progress value | false |
 | percentageColor | string | Progress value text color | black |
+| showMiddleText | boolean | To show static text in the middle of the loader | false |
+| middleTextStyle | Object of type{text: string,textSize:number,fillColor:string,fontWeight:number/string} | style object for static text in the middle of the loader | null |
 | direction | string | Direction in which progress indicator grows. [horizontal,vertical] | horizontal |
 | backgroundFill | string | background color of the component svg | #eee8dc |
 | fontSize | number | Font size of the progress value text(pixel) | 15 |
@@ -94,5 +98,6 @@ The `<angular-svg-progress />` component takes many attributes that allows you t
 | circleWidth | number | Width of the circular disk | 15 |
 
 
+
 ## Support this project
 If you find this project useful, please star the repo to let people know that it's reliable. Also, share it with friends and colleagues that might find this useful as well. Thank you :smile:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-svg-progress",
-  "version": "0.0.1",
+  "version": "1.1.1",
   "peerDependencies": {
     "@angular/common": "^7.2.0",
     "@angular/core": "^7.2.0"

src/lib/angular-svg-progress.component.html

@@ -47,6 +47,19 @@
       >
         {{ svgProgress }}%
       </text>
+      <text
+        y="55%"
+        x="50%"
+        *ngIf="showMiddleText && !showPercentage"
+        text-anchor="middle"
+        [attr.font-weight]="middleTextStyle.fontWeight"
+        alignment-baseline="middle"
+        [attr.font-size]="middleTextStyle.textSize"
+        [attr.fill]="middleTextStyle.fillColor"
+        fill="blue"
+      >
+        {{middleTextStyle.text}}
+      </text>
     </g>
   </svg>
 </span>
@@ -94,6 +107,19 @@
       >
         {{ svgProgress }}%
       </text>
+       <text
+        y="55%"
+        x="50%"
+        *ngIf="showMiddleText && !showPercentage"
+        text-anchor="middle"
+        [attr.font-weight]="middleTextStyle.fontWeight"
+        alignment-baseline="middle"
+        [attr.font-size]="middleTextStyle.textSize"
+        [attr.fill]="middleTextStyle.fillColor"
+        fill="blue"
+      >
+        {{middleTextStyle.text}}
+      </text>
     </g>
   </svg>
 </span>
@@ -137,6 +163,19 @@
         >
           {{ svgProgress }}%
         </text>
+         <text
+        y="55%"
+        x="50%"
+        *ngIf="showMiddleText && !showPercentage"
+        text-anchor="middle"
+        [attr.font-weight]="middleTextStyle.fontWeight"
+        alignment-baseline="middle"
+        [attr.font-size]="middleTextStyle.textSize"
+        [attr.fill]="middleTextStyle.fillColor"
+        fill="blue"
+      >
+        {{middleTextStyle.text}}
+      </text>
     </g>
   </svg>
 </span>

src/lib/angular-svg-progress.component.ts

@@ -1,5 +1,11 @@
 import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
 
+export interface CenterTextStyle {
+  text: string;
+  textSize: number;
+  fillColor: string;
+  fontWeight: number | number;
+}
 @Component({
   selector: 'angular-svg-progress',
   templateUrl: 'angular-svg-progress.component.html'
@@ -12,7 +18,9 @@ export class AngularSvgProgressComponent implements OnInit {
   @Input() height: number = 100;
   @Input() shape: string = 'rectangle';
   @Input() borderColor: string = 'black';
-  @Input() showPercentage: boolean;
+  @Input() showPercentage: boolean = true;
+  @Input() showMiddleText: boolean;
+  @Input() middleTextStyle: CenterTextStyle;
   @Input() percentageColor: string = 'black';
   @Input() direction: string = 'horizontal';
   @Input() backgroundFill: string = '#eee8dc';