A simple radial progress component for Angular. Responsive and highly customizable.
npm install ngx-radial-progressA simple radial progress component for Angular. Responsive and highly customizable.
Import in your Angular AppModule like:
``typescript
// Import radial-progress
import {RadialProgressModule} from "ngx-radial-progress";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
RadialProgressModule // Import RadialProgressModule here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
`
Use it in your Angular application like:
`xml`
[circleSize]="250"
[title]="'Title goes here'"
>
Option | Type | Default | Description
--- | --- | --- | ---
addClass | string | '' | add custom class(es) to componentboolean
animation | | true | whether to animate drawing of outer circle or notnumber
circleSize | | 0 | size of circle. If 0 the circle is scaled relative to parentboolean
clockwise | | false | whether to rotate clockwise or counter-clockwisenumber
delay | | 0 | delay drawing of outer circle (in ms)string
fill | | 'transparent' | color of fill of outer circle. Pass any color values you wantstring
fillBackground | | 'transparent' | color of fill of inner circle. Pass any color values you wantnumber
percent | | 50 | number of percentstring
percentUnit | | '%' | unit after percentage counterboolean
showPercent | | true | whether to show (percentage) counter or notstring
strokeBackground | | 'transparent' | color of inner stroke. Pass any color values you wantstring
strokeLinecap | | 'butt' | stroke linecap of outer circle. Possible values: 'butt', 'round', 'square', 'inherit'array
strokeSteps | | [{strokeColor: 'red',strokeStep: 10}, {strokeColor: 'green',strokeStep: 100}] | array with json object(s). Only relevant if animation == truestring
strokeSteps.strokeColor | | ['red', 'green'] | color of outer circle until current step. Pass any color values you want. Only relevant if animation == truenumber
strokeSteps.strokeStep | | [10, 100] | defines color to given percentage value. Make sure to define strokeColor for strokeStep == 100. Only relevant if animation == truenumber
strokeWidth | | 10 | width of outer circle strokenumber
strokeWidthBackground | | 10 | width of inner circle strokestring
title | | '' | text to display. Leave empty to hidenumber
transitionDuration | | 5000 | time to draw outer circle to 100% (in ms). Only relevant if animation == true
As mentioned in the options, there is one option strokeSteps. In here, you can define multiple intervals for your radial progress.
For example
`xml`
[strokeSteps]="[{
strokeColor: '#e00079',
strokeStep: 25
}, {
strokeColor: '#ff7300',
strokeStep: 50
}, {
strokeColor: 'rgb(149, 193, 31)',
strokeStep: 75
}, {
strokeColor: 'rgb(58, 65, 68)',
strokeStep: 100
}]"
>#e00079
will result in something like this
!alt text
depending on the given percentage. That means:
- color = for percentage interval between 0 - 24#ff7300
- color = for percentage interval between 25 - 49rgb(149, 193, 31)
- color = for percentage interval between 50 - 74rgb(58, 65, 68)
- color = for percentage interval between 75 - 100
NOTE: If you want only one single color, define strokeSteps like this:
`xml``
strokeColor: 'red',
strokeStep: 100
}]"
>
Thank you BrowserStack for prodiving us with the infrastructure needed to test ngx-radial-progress.
ngx-radial-progress is released under the Apache 2.0 license.