Angular Radial Progress

A simple radial progress component for Angular. Responsive and highly customizable.

Installation

Import in your Angular AppModule like:

// 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:

<radial-progress
  [percent]="85"
  [circleSize]="250"
  [title]="'Title goes here'"
></radial-progress>

Options

Option	Type	Default	Description
addClass	string	''	add custom class(es) to component
animation	boolean	true	whether to animate drawing of outer circle or not
circleSize	number	0	size of circle. If 0 the circle is scaled relative to parent
clockwise	boolean	false	whether to rotate clockwise or counter-clockwise
delay	number	0	delay drawing of outer circle (in ms)
fill	string	'transparent'	color of fill of outer circle. Pass any color values you want
fillBackground	string	'transparent'	color of fill of inner circle. Pass any color values you want
percent	number	50	number of percent
percentUnit	string	'%'	unit after percentage counter
showPercent	boolean	true	whether to show (percentage) counter or not
strokeBackground	string	'transparent'	color of inner stroke. Pass any color values you want
strokeLinecap	string	'butt'	stroke linecap of outer circle. Possible values: 'butt', 'round', 'square', 'inherit'
strokeSteps	array	[{strokeColor: 'red',strokeStep: 10}, {strokeColor: 'green',strokeStep: 100}]	array with json object(s). Only relevant if animation == true
strokeSteps.strokeColor	string	['red', 'green']	color of outer circle until current step. Pass any color values you want. Only relevant if animation == true
strokeSteps.strokeStep	number	[10, 100]	defines color to given percentage value. Make sure to define strokeColor for strokeStep == 100. Only relevant if animation == true
strokeWidth	number	10	width of outer circle stroke
strokeWidthBackground	number	10	width of inner circle stroke
title	string	''	text to display. Leave empty to hide
transitionDuration	number	5000	time to draw outer circle to 100% (in ms). Only relevant if animation == true

How stroke steps work

As mentioned in the options, there is one option strokeSteps. In here, you can define multiple intervals for your radial progress.

For example

   <radial-progress
     [percent]="85"
     [strokeSteps]="[{
         strokeColor: '#e00079',
         strokeStep: 25
      }, {
         strokeColor: '#ff7300',
         strokeStep: 50
      }, {
         strokeColor: 'rgb(149, 193, 31)',
         strokeStep: 75
      }, {
         strokeColor: 'rgb(58, 65, 68)',
         strokeStep: 100
      }]"
   ></radial-progress>

will result in something like this depending on the given percentage. That means:

• color = #e00079 for percentage interval between 0 - 24
• color = #ff7300 for percentage interval between 25 - 49
• color = rgb(149, 193, 31) for percentage interval between 50 - 74
• color = rgb(58, 65, 68) for percentage interval between 75 - 100

NOTE: If you want only one single color, define strokeSteps like this:

   <radial-progress
     [strokeSteps]="[{
        strokeColor: 'red',
        strokeStep: 100
     }]"
   ></radial-progress>

Thank you

Thank you BrowserStack for prodiving us with the infrastructure needed to test ngx-radial-progress.

License

ngx-radial-progress is released under the Apache 2.0 license.