Angular Gradient Progress Bar

An Angular module to render a linear or segmented gradient progress bar on the app. This angular package provides 2 variants of the progress bars that can be used:

a. Advance Progress Bar

b. Simple Progress Bar

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:

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: Porgres 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]="4" [quartileValueHigh]="7"]> </angular-gradient-progressbar>

Note: In the above example anything below 4 is low, between 4 and 7 is medium and anything above 7 is high. If u are changing these values make sure your aware of the barCount value as that quatile showcase can change accordingly.

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>

See live demo and download source code.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by aditbharadwaj. Visit their official repository for more information and follow for future updates.