This angular package provides 2 variants of the progress bars that can be used:
StackBlitz Demo here !
For any support requests please contact
npm i angular-gradient-progressbar
import { AngularGradientProgressbarModule } from "angular-gradient-progressbar";
@NgModule({
declarations: [ ... ],
imports: [AngularGradientProgressbarModule ]
})
export class YourModule {}
Inside your page.component.html
<angular-gradient-progressbar [type]="1"></angular-gradient-progressbar>
You need to specify a type of progress bar you want to use other wise it defaults to 1.
Their are two types of gradient progress bar included:
-
Type "1": (Advance Gradient Progress Bar) Options Available for this are:
a. Provide Value for the progress bar using
value
(defaults to 75)<angular-gradient-progressbar [type]="1" [value] ="75"]> </angular-gradient-progressbar>
b.Changing tool tip text color 3 options are available
<angular-gradient-progressbar [type]="1" lowTextColor="red"> </angular-gradient-progressbar> <angular-gradient-progressbar [type]="1" mediumTextColor="orange"> </angular-gradient-progressbar> <angular-gradient-progressbar [type]="1" highTextColor="green"> </angular-gradient-progressbar>
c. Change Progress bar width using
progressBarWidth
( default is 7).Note: Progress Bar width works in opposite way higher the value lower the width and vice a versa.
<angular-gradient-progressbar [type]="1" [progressBarWidth]="7"]> </angular-gradient-progressbar>
d. Change Number of Bar Count using
barCount
( default is 7 and max is 10).<angular-gradient-progressbar [type]="1" [barCount] ="7"]> </angular-gradient-progressbar>
e. You Can change the Quartile Value of the progress bar which define the number of data points to define range for (low,medium,high) using
quartileValueLow
andquartileValueHigh
.<angular-gradient-progressbar [type]="1" [quartileValueLow]="3" [quartileValueHigh]="6"]> </angular-gradient-progressbar>
Note: In the above example anything below 3 is low, between 3 and 6 is medium and anything above 6 is high. If u are changing these values make sure your aware of the barCount value as that quartile showcase can change accordingly. For the default of
barCount = 7
every quartile will be100 / 7 = 14.29 %
. The default ofquartileValueLow = 3
will render everything below3 * 14.29 % = 42.87%
aslow
.f. You can show and hide tooltip by setting
showToolTip
true or false ( default is true).<angular-gradient-progressbar [type]="1" [showToolTip]="true"]> </angular-gradient-progressbar>
-
Type "2": (Simple CSS Gradient Progress Bar) Options Available for this are:
a. if the type is set to 2 you can set the progress value for the second progress bar using
secondValue
( default value is 75 and max is 100)<angular-gradient-progressbar [type]="2" [secondValue]="75"]> </angular-gradient-progressbar>
Note: This project was ported from react version BlogPost to angular and converted into a Npm Package
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.
Run ng test
to execute the unit tests via Karma.