Angular Gradient Progress Bar

Gradient Angular Progress bar

This angular package provides 2 variants of the progress bars that can be used:

a. Advance Progress Bar

b. Simple Progress Bar

StackBlitz

StackBlitz Demo here !

Support

For any support requests please contact

[email protected]

Installation

npm i angular-gradient-progressbar

Import the module inside your page module.

import { AngularGradientProgressbarModule } from "angular-gradient-progressbar";

@NgModule({
  declarations: [ ... ],
  imports: [AngularGradientProgressbarModule ]
  })
 export class YourModule {}

Usage

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:

1. 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 and quartileValueHigh.

   <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 be 100 / 7 = 14.29 %. The default of quartileValueLow = 3 will render everything below 3 * 14.29 % = 42.87%as low.

   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>

2. 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

Note: This project was ported from react version BlogPost to angular and converted into a Npm Package

Build

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.

Running unit tests

Run ng test to execute the unit tests via Karma.