* Fork from [bootsoon/ng-circle-progress](https://github.com/bootsoon/ng-circle-progress)
npm install ng-circle-progress-day-countdown example 1| example 2 | example 3
--- | --- | ---
!screenshot_20180613-141150_fixture russia 2018 | !screenshot_20180613-141930_fixture russia 2018 | !screenshot_20180803-173749_fixture russia 2018
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.
To install this library, run:
``bash`
$ 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:
`typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import ng-circle-progress-day-countdown
import { NgCircleProgressModule } from 'ng-circle-progress-day-countdown';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify ng-circle-progress as an import
NgCircleProgressModule.forRoot({
// set defaults here
radius: 100,
outerStrokeWidth: 16,
innerStrokeWidth: 8,
outerStrokeColor: "#78C000",
innerStrokeColor: "#C7E596",
animationDuration: 300,
...
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`
Once NgCircleProgressModule is imported, you can use CircleProgressComponent in your Angular application:
`xml
[initDate]="initDate"
[radius]="100"
[outerStrokeWidth]="16"
[innerStrokeWidth]="8"
[outerStrokeColor]="'#78C000'"
[innerStrokeColor]="'#C7E596'"
[animation]="true"
[animationDuration]="300"
>
`
Option | Type | Default | Description
--- | --- | --- | ---
radius | number | 90 | Radius of circleboolean
clockwise | | true | Whether to rotate clockwise or counter-clockwiseboolean
showBackground | | true | Whether to display background circleboolean
showInnerStroke | | true | Whether to display inner strokestring
backgroundStroke | | 'transparent' | Background stroke colornumber
backgroundStrokeWidth | | 0 | Stroke width of background circlenumber
backgroundPadding | | 5 | Padding of background circlestring
backgroundColor | | 'transparent' | Background colornumber
backgroundOpacity | | 1 | Opacity of background colornumber
space | | 4 | Space between outer circle and inner circlenumber
toFixed | | 0 | Using fixed digital notation in Titleboolean
renderOnClick | | true | Render when component is clickedstring
unitsColor | | '#444444' | Font color of 'day', 'hour', etc. stringsnumber
outerStrokeWidth | | 8 | Stroke width of outer circle (progress circle)sting
outerStrokeColor | | '#78C000' | Stroke color of outer circlesting
outerStrokeLinecap | | 'round' | Stroke linecap of outer circle. Possible values(butt, round, square, inherit)number
innerStrokeWidth | | 4 | Stroke width of inner circlesting
innerStrokeColor | | '#C7E596' | Stroke color of inner circlestring
titleColor | | '#444444' | Font color of 'day', 'hour', etc. valuesstring
titleFontSize | | '20' | Font size of 'day', 'hour', etc. valuesstring
subtitleFontSize | | '10' | Font size of 'day', 'hour', etc. stringsboolean
animation | | true | Whether to animate the outer circle when renderingboolean
animateTitle | | true | Whether to animate the title when renderingnumber
animationDuration | | 500 | Duration of animation in microsecondsstring
class | | '' | CSS class name for SVG elementDate
initDate | | new Date ('04/15/2018 10:0 AM') | Init date of the percentDate
endDate| | new Date ('08/14/2021 10:0 AM') | End date of the percentstring
stringColor| | '#A9A9A9' | Font color of 'day', 'hour', etc. stringsstring
daysHoursFontSize| | '20' | Font size of the first linestring
minutesSecondsFontSize| | '15' | Font size of the second lineboolean
showContent | | true | Display or not the remaining daysstring
days| | 'days' | Day string valuestring
hours| | 'hours' | Hours string valuestring
minutes| | 'min' | Minutes string valuestring
seconds| | 'sec' | Seconds string valueArray
daysInitialXY| | [68, 125] | First value represent position in X axis and second represent Y axis of remaining days valueArray
hoursInitialXY| | [90, 125] | First value represent position in X axis and second represent Y axis of remaining hours valueArray
minutesSecondsInitialXY| | [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
`xml
[initDate]="initDate"
[radius]="100"
[outerStrokeWidth]="16"
...
(onCompletedTime)="completedTimeEventHandler($event)"
>
`
To generate all .js, .d.ts and *.metadata.json files:
`bash`
$ npm run build
To lint all *.ts files:
`bash``
$ npm run lint
MIT © bootsoon
This project was generated by Yeoman generator angular2-library