ng-circle-progress-day-countdown

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 { 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:

<!-- You can now use it in app.component.html -->
<circle-progress
  [endDate]="endDate"
  [initDate]="initDate"
  [radius]="100"
  [outerStrokeWidth]="16"
  [innerStrokeWidth]="8"
  [outerStrokeColor]="'#78C000'"
  [innerStrokeColor]="'#C7E596'"
  [animation]="true"
  [animationDuration]="300"
></circle-progress>

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 -->
<circle-progress
  [endDate]="endDate"
  [initDate]="initDate"
  [radius]="100"
  [outerStrokeWidth]="16"
  ...
  (onCompletedTime)="completedTimeEventHandler($event)"
></circle-progress>

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