https://github.com/ksachdeva/angular2-progressbar
Angular 2 component for progressbar.js
https://github.com/ksachdeva/angular2-progressbar
Last synced: 10 months ago
JSON representation
Angular 2 component for progressbar.js
- Host: GitHub
- URL: https://github.com/ksachdeva/angular2-progressbar
- Owner: ksachdeva
- License: mit
- Created: 2016-08-13T01:26:40.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-11-03T10:03:40.000Z (over 9 years ago)
- Last Synced: 2025-04-15T13:50:35.772Z (11 months ago)
- Language: TypeScript
- Size: 6.84 KB
- Stars: 7
- Watchers: 3
- Forks: 5
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# angular2-progressbar
# Install
npm install angular2-progressbar --save
# Usage
```
import {
ShapeOptions,
LineProgressComponent,
CircleProgressComponent,
SemiCircleProgressComponent} from 'angular2-progressbar';
@Component({
selector: 'app',
template: `
`
})
export class AppComponent {
@ViewChild(LineProgressComponent) lineComp: LineProgressComponent;
@ViewChild(CircleProgressComponent) circleComp: CircleProgressComponent;
@ViewChild(SemiCircleProgressComponent) semiCircleComp: SemiCircleProgressComponent;
private lineOptions: ShapeOptions = {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
svgStyle: { width: '100%' }
};
private circleOptions: ShapeOptions = {
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
duration: 1400,
easing: 'bounce',
strokeWidth: 6,
from: { color: '#FFEA82', a: 0 },
to: { color: '#ED6A5A', a: 1 },
// Set default step function for all animate calls
step: function(state: any, circle: any) {
circle.path.setAttribute('stroke', state.color);
}
};
private semiCircleOptions: ShapeOptions = {
strokeWidth: 6,
color: '#FFEA82',
trailColor: '#eee',
trailWidth: 1,
easing: 'easeInOut',
duration: 1400,
text: {
value: '',
alignToBottom: false
},
from: { color: '#FFEA82' },
to: { color: '#ED6A5A' },
// Set default step function for all animate calls
step: (state: any, bar: any) => {
bar.path.setAttribute('stroke', state.color);
var value = Math.round(bar.value() * 100);
if (value === 0) {
bar.setText('');
} else {
bar.setText(value);
}
bar.text.style.color = state.color;
}
};
ngAfterViewInit() {
this.lineComp.animate(0.9);
this.circleComp.animate(0.8);
this.semiCircleComp.animate(0.9);
}
}
```
See [angular2-progressbar-example](https://github.com/ksachdeva/angular2-progressbar-example) repository for the full example