You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
