https://github.com/ksachdeva/angular2-progressbar-example
Example for using angular2-progressbar component
https://github.com/ksachdeva/angular2-progressbar-example
Last synced: about 1 year ago
JSON representation
Example for using angular2-progressbar component
- Host: GitHub
- URL: https://github.com/ksachdeva/angular2-progressbar-example
- Owner: ksachdeva
- License: mit
- Created: 2016-08-13T01:51:09.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-09-16T17:09:12.000Z (over 9 years ago)
- Last Synced: 2025-01-04T08:35:52.198Z (about 1 year ago)
- Language: TypeScript
- Size: 10.7 KB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# angular2-progressbar-example
Example of how to use progressbar.js in angular 2 application
# Install require global applications
- npm install -g tslint
- npm install -g typings
- npm install -g typescript
# Install local dependencies
npm install
# Run the application
npm start
# Example
```
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);
}
}
```