Skip to content
No description, website, or topics provided.
TypeScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
src/app/circle-progress
.gitignore
README.md

README.md

CircleProgress

This project was generated with angular-cli version 1.0.0-beta.11-webpack.2.

Demo

About

It is a simple circle progress component created for Angualar2. When it was creating Angular2 was in RC5 version. Component is based only on SVG Graphics and has various of options to customize it.

Options

Option Type Default Description Example
percent number 0 Number of percent you want to show [percent]="20"
boxSize number 200 Size of whole svg element [boxSize]="300"
radius number 180 Radius od circle [radius]="90"
time number 0 Time in sec for progress animation [time]="2"
border number 20 Width of circle [border]="30"
color string 'green' Color of progress circle [color] = "'blue'"
backgroundColor string 'white' Color of rest of the circle [backgroundColor] = "'purple'"
lowColor string same os color option Color for percent from 0%->25% [lowColor]="'red'"
middleColor string look above Color for percent from 26%->50% [lowColor]="'orange'"
interColor string look above Color for percent from 51%->75% [lowColor]="'yellow'"
highColor string look above Color for percent from 76%->100% [lowColor]="'green'"
fontColor string black Color of font inside circle [fontColor]="'grey'"
fontSize number 12 Size font inside circle [fontSize]="20"
fontFamily string 'Times New Roman' Family of font inside circle [fontColor]="'Arial'"
fontX string '50%' X position of text inside in circle [fontX]="'20%'"
fontY string '55%' Y position of text inside in circle [fontY]="'60%'"
textAnchor string 'middle' Align of text. Possible values(start, middle, end) [textAnchor]="'end'"
innerFill string 'white' Color of inner circle [fontY]="'pink'"

Animation

To start progress animation you have to call function animate() on component.

Example

<circle-progress #circleProg1
                   [percent]="25"
                   [boxSize]="400"
                   [radius]="140"
                   [lowColor]="'red'"
                   [middleColor]="'orange'"
                   [interColor]="'#f1c40f'"
                   [highColor]="'#16a085'"
                   [border]="20"
                   [time]="5"
                   (click)="circleProg1.animate()"
  ></circle-progress>
You can’t perform that action at this time.