Round Progress Bar component for angular

No additional dependencies are required for this component.

DEMO

Demo

Installation

Install the package

npm install bear-round-progress --save

Import BearRoundProgressModule module in your module:

import { BearRoundProgressModule } from 'bear-round-progress';

@NgModule({
	imports: [
		BearRoundProgressModule
	]
})

Use

<br-bear-round-progress></br-bear-round-progress>

Available configurations

// This are the default configurations of the component. You can make your own config object with following parameters and pass them as input.
const config = {
    currentNumber: 60, // Current number out of total number
    maxNumber: 100, // Total number which represents the maximum of the bar
    radius: 100, // Radius of the circle
    gradientStart: '#833ab4', // Gradient start color
    gradientEnd: '#fcb045' // Gradient end color
}

<br-bear-round-progress 
    [currentNumber]="config.currentNumber" 
    [maxNumber]="config.maxNumber" 
    [radius]="config.radius" 
    [gradientStart]="config.gradientStart" 
    [gradientEnd]="config.gradientEnd"></br-bear-round-progress>