Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ng-circle-progress-day-countdown

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ng-circle-progress-day-countdown

* Fork from [bootsoon/ng-circle-progress](https://github.com/bootsoon/ng-circle-progress)

  • 0.16.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
31
increased by82.35%
Maintainers
1
Weekly downloads
 
Created
Source

ng-circle-progress-day-countdown

  • Fork from bootsoon/ng-circle-progress

Demo

example 1example 2example 3
screenshot_20180613-141150_fixture russia 2018screenshot_20180613-141930_fixture russia 2018screenshot_20180803-173749_fixture russia 2018

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

OptionTypeDefaultDescription
radiusnumber90Radius of circle
clockwisebooleantrueWhether to rotate clockwise or counter-clockwise
showBackgroundbooleantrueWhether to display background circle
showInnerStrokebooleantrueWhether to display inner stroke
backgroundStrokestring'transparent'Background stroke color
backgroundStrokeWidthnumber0Stroke width of background circle
backgroundPaddingnumber5Padding of background circle
backgroundColorstring'transparent'Background color
backgroundOpacitynumber1Opacity of background color
spacenumber4Space between outer circle and inner circle
toFixednumber0Using fixed digital notation in Title
renderOnClickbooleantrueRender when component is clicked
unitsColorstring'#444444'Font color of 'day', 'hour', etc. strings
outerStrokeWidthnumber8Stroke width of outer circle (progress circle)
outerStrokeColorsting'#78C000'Stroke color of outer circle
outerStrokeLinecapsting'round'Stroke linecap of outer circle. Possible values(butt, round, square, inherit)
innerStrokeWidthnumber4Stroke width of inner circle
innerStrokeColorsting'#C7E596'Stroke color of inner circle
titleColorstring'#444444'Font color of 'day', 'hour', etc. values
titleFontSizestring'20'Font size of 'day', 'hour', etc. values
subtitleFontSizestring'10'Font size of 'day', 'hour', etc. strings
animationbooleantrueWhether to animate the outer circle when rendering
animateTitlebooleantrueWhether to animate the title when rendering
animationDurationnumber500Duration of animation in microseconds
classstring''CSS class name for SVG element
initDateDatenew Date ('04/15/2018 10:0 AM')Init date of the percent
endDateDatenew Date ('08/14/2021 10:0 AM')End date of the percent
stringColorstring'#A9A9A9'Font color of 'day', 'hour', etc. strings
daysHoursFontSizestring'20'Font size of the first line
minutesSecondsFontSizestring'15'Font size of the second line
showContentbooleantrueDisplay or not the remaining days
daysstring'days'Day string value
hoursstring'hours'Hours string value
minutesstring'min'Minutes string value
secondsstring'sec'Seconds string value
daysInitialXYArray<number>[68, 125]First value represent position in X axis and second represent Y axis of remaining days value
hoursInitialXYArray<number>[90, 125]First value represent position in X axis and second represent Y axis of remaining hours value
minutesSecondsInitialXYArray<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

Keywords

FAQs

Package last updated on 05 Jan 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc