Skip to content

A simple circle progress component created for Angular based on SVG Graphics.

Notifications You must be signed in to change notification settings

Ovsdrak/ng-circle-progress

 
 

Repository files navigation

ng-circle-progress

Demo

Try out the demo!

demo

About

It is a simple circle progress component created for angular based only on SVG graphics and has various of options to customize it.

Installation

To install this library, run:

Angular 6 projects

$ npm install ng-circle-progress --save

Angular 5 or Angular 4 projects

$ npm install ng-circle-progress@1.0.0 --save

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
import { NgCircleProgressModule } from 'ng-circle-progress';

@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
  [percent]="85"
  [radius]="100"
  [outerStrokeWidth]="16"
  [innerStrokeWidth]="8"
  [outerStrokeColor]="'#78C000'"
  [innerStrokeColor]="'#C7E596'"
  [animation]="true"
  [animationDuration]="300"
></circle-progress>

Options

Option Type Default Description
percent number 0 Number of percent you want to show
maxPercent number 1000 Max number of percent you want to show
radius number 90 Radius of circle
clockwise boolean true Whether to rotate clockwise or counter-clockwise
responsive boolean false Whether to make the circle responsive
startFromZero boolean true Whether to start the percent from zero
showZeroOuterStroke boolean true Whether to show the bar if percent is zero
showTitle boolean true Whether to display title
showSubtitle boolean true Whether to display subtitle
showUnits boolean true Whether to display units
showImage boolean true Whether to display image. All text will be hidden if showImage is true.
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
backgroundGradient boolean false Make background gradient
backgroundColor string 'transparent' Background color
backgroundGradientStopColor string 'transparent' Background gradient stop 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
units string '%' Units showed aside the title
unitsFontSize string '10' Font size of units
unitsFontWeight string '100' Font weight of units
unitsColor string '#444444' Font color of units
outerStrokeWidth number 8 Stroke width of outer circle (progress circle)
outerStrokeGradient boolean false Make outer circle gradient
outerStrokeColor sting '#78C000' Stroke color of outer circle
outerStrokeGradientStopColor string 'transparent' Stroke gradient stop 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
title string|Array<String> 'auto' text showed as title. Percentage is displayed when title equals 'auto'.
titleFormat Function undefined A callback function to format title. It returns a string or an array of string.
titleColor string '#444444' Font color of title
titleFontSize string '20' Font size of title
titleFontWeight string '100' Font weight of title
subtitle string|Array<String> 'Percent' text showed as subtitle
subtitleFormat Function undefined A callback function to format subtitle. It returns a string or an array of string.
subtitleColor string '#A9A9A9' Font color of subtitle
subtitleFontSize string '10' Font size of subtitle
subtitleFontWeight string '100' Font weight of subtitle
imageSrc string '/assets/images/music.svg' Src of image
imageHeight number 80 Height of image
imageWidth number 80 Width of image
animation boolean true Whether to animate the outer circle when rendering
animateTitle boolean true Whether to animate the title when rendering
animateSubtitle boolean false Whether to animate the subtitle when rendering
animationDuration number 500 Duration of animation in microseconds
class string '' CSS class name for SVG element
lazy boolean false Pauses when out of viewport
// subtitleFormat callback example
formatSubtitle = (percent: number) : string => {
  if(percent >= 100){
    return "Congratulations!"
  }else if(percent >= 50){
    return "Half"
  }else if(percent > 0){
    return "Just began"
  }else {
    return "Not started"
  }
}

Development (needs Angular 6)

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

About

A simple circle progress component created for Angular based on SVG Graphics.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 100.0%