Skip to content

Commit ac01493

Browse files
justinkxjustinkx
committed
initial commit to angular svg loader
0 parents  commit ac01493

17 files changed

+517
-0
lines changed

‎LICENSE.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
The MIT License (MIT) Copyright (c) 2019 Justin K Xavier.
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4+
5+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6+
7+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
# Angular SVG Progress
2+
**SVG** Progress component for angular and ionic framework consist of bar, heart and circular loaders.
3+
4+
5+
## Features
6+
- Each loader component is an svg.
7+
- Consist of bar, heart and circular loaders.
8+
- Can be scaled to any size.
9+
- customize color, size, value, border-radius, direction.
10+
11+
## Installation
12+
13+
#### 1. Install the NPM Package
14+
```
15+
npm install --save angular-svg-progress
16+
```
17+
18+
#### 2. Import `AngularSvgProgressModule` module
19+
20+
**Add `AngularSvgProgressModule` in your app's root module**
21+
```typescript
22+
import { AngularSvgProgressModule } from 'angular-svg-progress';
23+
24+
// import the module
25+
@NgModule({
26+
...
27+
imports: [
28+
AngularSvgProgressModule
29+
]
30+
})
31+
export class AppModule {}
32+
```
33+
34+
**For Lazy Loaded Components add `AngularSvgProgressModule` in your child/shared module(s)**
35+
```typescript
36+
import { AngularSvgProgressModule } from 'angular-svg-progress';
37+
38+
@NgModule({
39+
...
40+
imports: [
41+
IonicImageLoader
42+
]
43+
})
44+
export class SharedModule {}
45+
```
46+
47+
# Usage
48+
49+
## Basic Usage
50+
This HTML code demonstrates basic usage of this module:
51+
52+
```html
53+
<angular-svg-progress
54+
[svgProgress]="Progress"
55+
style="margin-bottom: 25px;"
56+
[width]="500"
57+
[shape]="'rectangle'"
58+
[borderColor]="'#383a3e'"
59+
[direction]="'horizontal'"
60+
[showPercentage]="true"
61+
[height]="40"
62+
[progressColor]="'#FF0000'">
63+
</angular-svg-progress>
64+
```
65+
66+
## Advanced Usage
67+
The `<angular-svg-progress />` component takes many attributes that allows you to customize the progress. You can use the following table as a reference:
68+
69+
| Attribute Name | Type | Description | Default Value |
70+
| --- | --- | --- | --- |
71+
| shape | string | Shape of progress component. [bar, heart, circle] | rectangle |
72+
| width | number | Total width in numbers(pixel) | 100 |
73+
| height | number | Total height in numbers(pixel) | 100 |
74+
| svgProgress | number | Dynamic progress value(in percentage) | NA |
75+
| progressColor | string | Color of the progress indicator | red |
76+
| borderColor | string | Color of the svg progress component border | black |
77+
| showPercentage | boolean | To show the progress value | false |
78+
| percentageColor | string | Progress value text color | black |
79+
| direction | string | Direction in which progress indicator grows. [horizontal,vertical] | horizontal |
80+
| backgroundFill | string | background color of the component svg | #eee8dc |
81+
| fontSize | number | Font size of the progress value text(pixel) | 15 |
82+
| borderRadius | number | Border radius for the svg component [only for shape bar] | 10 |
83+
| radius | number | Radius of the circular progress | 50 |
84+
| circleWidth | number | Width of the circular disk | 15 |
85+
86+
87+
## Support this project
88+
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:

‎karma.conf.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// Karma configuration file, see link for more information
2+
// https://karma-runner.github.io/1.0/config/configuration-file.html
3+
4+
module.exports = function (config) {
5+
config.set({
6+
basePath: '',
7+
frameworks: ['jasmine', '@angular-devkit/build-angular'],
8+
plugins: [
9+
require('karma-jasmine'),
10+
require('karma-chrome-launcher'),
11+
require('karma-jasmine-html-reporter'),
12+
require('karma-coverage-istanbul-reporter'),
13+
require('@angular-devkit/build-angular/plugins/karma')
14+
],
15+
client: {
16+
clearContext: false // leave Jasmine Spec Runner output visible in browser
17+
},
18+
coverageIstanbulReporter: {
19+
dir: require('path').join(__dirname, '../../coverage/angular-svg-progress'),
20+
reports: ['html', 'lcovonly'],
21+
fixWebpackSourcePaths: true
22+
},
23+
reporters: ['progress', 'kjhtml'],
24+
port: 9876,
25+
colors: true,
26+
logLevel: config.LOG_INFO,
27+
autoWatch: true,
28+
browsers: ['Chrome'],
29+
singleRun: false,
30+
restartOnFileChange: true
31+
});
32+
};

‎ng-package.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
3+
"dest": "../../dist/angular-svg-progress",
4+
"lib": {
5+
"entryFile": "src/public-api.ts"
6+
}
7+
}

‎package.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "angular-svg-progress",
3+
"version": "0.0.1",
4+
"peerDependencies": {
5+
"@angular/common": "^7.2.0",
6+
"@angular/core": "^7.2.0"
7+
},
8+
"description": "SVG progress loader compactable for angular and ionic",
9+
"author": "Justin K Xavier",
10+
"repository": {
11+
"type": "git",
12+
"url": "https://github.com/justinkx/Angular-Svg-Progress.git"
13+
},
14+
"bugs": {
15+
"url": "https://github.com/justinkx/Angular-Svg-Progress/issues"
16+
},
17+
"homepage": "https://github.com/justinkx/Angular-Svg-Progress",
18+
"license": "MIT",
19+
"keywords": [
20+
"angular",
21+
"loader",
22+
"svg",
23+
"ionic",
24+
"typescript"
25+
]
26+
}

‎src/assets/angular-svg-loader.gif

93.4 KB
Loading

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

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<span *ngIf="shape === 'heart'">
2+
<svg
3+
viewBox="0 0 100 100"
4+
[ngStyle]="{ width: svgWidth, height: svgHeight }"
5+
xmlns="http://www.w3.org/2000/svg"
6+
>
7+
<defs>
8+
<linearGradient
9+
id="def_heart"
10+
[attr.x1]="x1"
11+
[attr.y1]="y1"
12+
[attr.x2]="x2"
13+
[attr.y2]="x2"
14+
>
15+
<stop [attr.offset]="progress" [attr.stop-color]="progressColor">
16+
<animate
17+
attributeName="offset"
18+
[attr.from]="animateFrom / 100"
19+
[attr.to]="svgProgress / 100"
20+
repeatCount="indefinite"
21+
dur="1000ms"
22+
/>
23+
</stop>
24+
<stop offset="0%" [attr.stop-color]="backgroundFill" stop-opacity="1" />
25+
</linearGradient>
26+
</defs>
27+
<g>
28+
<path
29+
[attr.stroke]="borderColor"
30+
id="svg_3"
31+
d="m49.547763,35.685624c19.58402,-49.023979 96.314852,0 0,63.03083c-96.314852,-63.03083 -19.58402,-112.05481 0,-63.03083z"
32+
fill-opacity="null"
33+
stroke-opacity="null"
34+
stroke-width="1.5"
35+
fill="url(#def_heart)"
36+
/>
37+
<text
38+
y="55%"
39+
x="50%"
40+
*ngIf="showPercentage"
41+
text-anchor="middle"
42+
font-weight="bold"
43+
alignment-baseline="middle"
44+
[attr.font-size]="fontSize"
45+
[attr.fill]="percentageColor"
46+
fill="blue"
47+
>
48+
{{ svgProgress }}%
49+
</text>
50+
</g>
51+
</svg>
52+
</span>
53+
<span *ngIf="shape === 'rectangle'">
54+
<svg [attr.width]="width" [attr.height]="height">
55+
<defs>
56+
<linearGradient
57+
id="def_rect"
58+
[attr.x1]="x1"
59+
[attr.y1]="y1"
60+
[attr.x2]="x2"
61+
[attr.y2]="x2"
62+
>
63+
<stop [attr.offset]="progress" [attr.stop-color]="progressColor">
64+
<animate
65+
attributeName="offset"
66+
[attr.from]="animateFrom / 100"
67+
[attr.to]="svgProgress / 100"
68+
repeatCount="indefinite"
69+
dur="1000ms"
70+
/>
71+
</stop>
72+
<stop offset="0%" [attr.stop-color]="backgroundFill" stop-opacity="1" />
73+
</linearGradient>
74+
</defs>
75+
<g>
76+
<rect
77+
x="0"
78+
[attr.rx]="borderRadius"
79+
y="0"
80+
[attr.width]="width"
81+
[attr.height]="height"
82+
[attr.stroke]="borderColor"
83+
fill="url(#def_rect)"
84+
/>
85+
<text
86+
*ngIf="showPercentage"
87+
y="50%"
88+
x="50%"
89+
text-anchor="middle"
90+
font-weight="bold"
91+
alignment-baseline="middle"
92+
[attr.font-size]="fontSize"
93+
[attr.fill]="percentageColor"
94+
>
95+
{{ svgProgress }}%
96+
</text>
97+
</g>
98+
</svg>
99+
</span>
100+
<span *ngIf="shape === 'circle'">
101+
<svg
102+
class="progress"
103+
[attr.width]="(radius + 10) * 2"
104+
[attr.height]="(radius + 10) * 2"
105+
[attr.viewBox]="circleViewBox"
106+
>
107+
<g>
108+
<circle
109+
[attr.cx]="radius + 10"
110+
[attr.cy]="radius + 10"
111+
[attr.r]="radius"
112+
fill="none"
113+
[attr.stroke]="backgroundFill"
114+
[attr.stroke-width]="circleWidth"
115+
/>
116+
<circle
117+
class="progress__value"
118+
[attr.cx]="radius + 10"
119+
[attr.cy]="radius + 10"
120+
[attr.r]="radius"
121+
fill="none"
122+
transform="rotate(-90deg)"
123+
[attr.stroke-dashoffset]="strokeDashoffset"
124+
[attr.stroke-dasharray]="circumference"
125+
[attr.stroke]="progressColor"
126+
[attr.stroke-width]="circleWidth"
127+
/>
128+
<text
129+
y="50%"
130+
x="50%"
131+
*ngIf="showPercentage"
132+
text-anchor="middle"
133+
font-weight="bold"
134+
alignment-baseline="middle"
135+
[attr.font-size]="fontSize"
136+
[attr.fill]="borderColor"
137+
>
138+
{{ svgProgress }}%
139+
</text>
140+
</g>
141+
</svg>
142+
</span>

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { AngularSvgProgressComponent } from './angular-svg-progress.component';
4+
5+
describe('AngularSvgProgressComponent', () => {
6+
let component: AngularSvgProgressComponent;
7+
let fixture: ComponentFixture<AngularSvgProgressComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ AngularSvgProgressComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(AngularSvgProgressComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
2+
3+
@Component({
4+
selector: 'angular-svg-progress',
5+
templateUrl: 'angular-svg-progress.component.html'
6+
})
7+
export class AngularSvgProgressComponent implements OnInit {
8+
9+
@Input() svgProgress: number;
10+
@Input() progressColor: string = 'red';
11+
@Input() width: number = 100;
12+
@Input() height: number = 100;
13+
@Input() shape: string = 'rectangle';
14+
@Input() borderColor: string = 'black';
15+
@Input() showPercentage: boolean;
16+
@Input() percentageColor: string = 'black';
17+
@Input() direction: string = 'horizontal';
18+
@Input() backgroundFill: string = '#eee8dc';
19+
@Input() fontSize: number = 15;
20+
@Input() borderRadius: number = 10;
21+
@Input() radius: number = 50;
22+
@Input() circleWidth: number = 15;
23+
progress: string;
24+
svgWidth: string;
25+
svgHeight: string;
26+
animateFrom: number;
27+
x1: string = `0%`;
28+
y1: string = `100%`
29+
x2: string = `100%`
30+
y2: string = `0%`;
31+
circleViewBox: any;
32+
strokeDashoffset: number;
33+
circumference;
34+
constructor() { }
35+
36+
ngOnInit() {
37+
this.svgWidth = this.width.toString() + `px`;
38+
this.svgHeight = this.height.toString() + `px`;
39+
if (this.direction === 'vertical') {
40+
this.x2 = `0%`;
41+
this.y1 = `100%`;
42+
this.x1 = `0%`;
43+
this.y2 = `0%`;
44+
}
45+
this.circleViewBox = 0, 0, (this.radius + 10) * 2, (this.radius + 10) * 2;
46+
this.circumference = 2 * Math.PI * this.radius;
47+
this.strokeDashoffset = this.circumference;
48+
console.log(this.direction, this.x2, this.y1);
49+
}
50+
ngOnChanges(changes: SimpleChanges) {
51+
const { currentValue, previousValue } = changes['svgProgress'];
52+
this.progress = currentValue.toString() + `%`;
53+
if (this.shape === 'circle') {
54+
this.strokeDashoffset = this.circumference * (1 - (this.svgProgress / 100));
55+
}
56+
this.animateFrom = previousValue ? previousValue : 0;
57+
setTimeout(() => {
58+
this.animateFrom = this.svgProgress;
59+
}, 50);
60+
}
61+
62+
}

0 commit comments

Comments
 (0)