JavaScriptAngularJSAngular Gradient Progress Bar

Angular Gradient Progress Bar

An Angular module to make 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:

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

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>

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>

See live demo and download the source code.

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

Subscribe For More!

Enter your email address to subscribe my blog and receive notifications of new posts by email.

Explore More

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About SAROJ MEHER

He is a Lecturer (English & Sociology), a professional Artist, and a blogger. He do paintings, sketches since his childhood. He is in the teaching field for 10 years. In this teaching line, he has experience in teaching English at High School and College levels. He has also experienced teaching computer theory and practicals during the school teaching period. He is in the Blogging field for more than 5 years.

Subscribe For More!

Enter your email address to subscribe my blog and receive notifications of new posts by email.

TRENDING ARTICLES

ARTICLESTRENDING