ng-circle-progress-day-countdown
- Fork from bootsoon/ng-circle-progress
Demo
example 1 | example 2 | example 3 |
---|---|---|
About
It is a simple circle day progress component created for Angular 4 based only on SVG graphics and has various of options to customize it.
Installation
To install this library, run:
$ npm i ng-circle-progress-day-countdown
Once you have installed it, you can import it in any Angular application,
then from your Angular AppModule
:
;; ; // Import ng-circle-progress-day-countdown;
Once NgCircleProgressModule is imported, you can use CircleProgressComponent in your Angular application:
<!-- You can now use it in app.component.html -->
Options
Option | Type | Default | Description |
---|---|---|---|
radius | number |
90 |
Radius of circle |
clockwise | boolean |
true |
Whether to rotate clockwise or counter-clockwise |
showBackground | boolean |
true |
Whether to display background circle |
showInnerStroke | boolean |
true |
Whether to display inner stroke |
backgroundStroke | string |
'transparent' |
Background stroke color |
backgroundStrokeWidth | number |
0 |
Stroke width of background circle |
backgroundPadding | number |
5 |
Padding of background circle |
backgroundColor | string |
'transparent' |
Background color |
backgroundOpacity | number |
1 |
Opacity of background color |
space | number |
4 |
Space between outer circle and inner circle |
toFixed | number |
0 |
Using fixed digital notation in Title |
renderOnClick | boolean |
true |
Render when component is clicked |
unitsColor | string |
'#444444' |
Font color of 'day', 'hour', etc. strings |
outerStrokeWidth | number |
8 |
Stroke width of outer circle (progress circle) |
outerStrokeColor | sting |
'#78C000' |
Stroke color of outer circle |
outerStrokeLinecap | sting |
'round' |
Stroke linecap of outer circle. Possible values(butt, round, square, inherit) |
innerStrokeWidth | number |
4 |
Stroke width of inner circle |
innerStrokeColor | sting |
'#C7E596' |
Stroke color of inner circle |
titleColor | string |
'#444444' |
Font color of 'day', 'hour', etc. values |
titleFontSize | string |
'20' |
Font size of 'day', 'hour', etc. values |
subtitleFontSize | string |
'10' |
Font size of 'day', 'hour', etc. strings |
animation | boolean |
true |
Whether to animate the outer circle when rendering |
animateTitle | boolean |
true |
Whether to animate the title when rendering |
animationDuration | number |
500 |
Duration of animation in microseconds |
class | string |
'' |
CSS class name for SVG element |
initDate | Date |
new Date ('04/15/2018 10:0 AM') |
Init date of the percent |
endDate | Date |
new Date ('08/14/2021 10:0 AM') |
End date of the percent |
stringColor | string |
'#A9A9A9' |
Font color of 'day', 'hour', etc. strings |
daysHoursFontSize | string |
'20' |
Font size of the first line |
minutesSecondsFontSize | string |
'15' |
Font size of the second line |
showContent | boolean |
true |
Display or not the remaining days |
days | string |
'days' |
Day string value |
hours | string |
'hours' |
Hours string value |
minutes | string |
'min' |
Minutes string value |
seconds | string |
'sec' |
Seconds string value |
daysInitialXY | Array<number> |
[68, 125] | First value represent position in X axis and second represent Y axis of remaining days value |
hoursInitialXY | Array<number> |
[90, 125] | First value represent position in X axis and second represent Y axis of remaining hours value |
minutesSecondsInitialXY | Array<number> |
[85, 155] | First value represent position in X axis and second represent Y axis of remaining minutes and seconds value |
Event: onCompletedTime
triggered on 0 days, 0 hours, 0 minutes, 0 seconds remaining
<!-- You can now use it in app.component.html -->
Development
To generate all *.js
, *.d.ts
and *.metadata.json
files:
$ npm run build
To lint all *.ts
files:
$ npm run lint
License
MIT © bootsoon
This project was generated by Yeoman generator angular2-library