bear-round-progress

No additional dependencies are required for this component.

Usage no npm install needed!

<script type="module">
  import bearRoundProgress from 'https://cdn.skypack.dev/bear-round-progress';
</script>

README

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>