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


npm i angular-gradient-progressbar

Import the module inside your page module.

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

  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:

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.

Saroj Meher
Saroj Meher
Howdy! Friends, I am Saroj Meher. I am an Artist. I do Painting on mediums like Acrylic, Watercolour, Oil etc. I have over 7 years of experience in WordPress. I am currently running 30+ website. I am specialized in WordPress and WooCommerce, WordPress Theme Customization and Theme Development. I can fix any kind of WordPress error/issue like PHP, CSS, Js issues and other Theme and Plugin related issues. Client's Satisfaction is my first priority.

Subscribe For More!

Subscribe to get the Latest Updates directly in you Email box.

Explore More


Please enter your comment!
Please enter your name here

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

I am a Lecturer (English & Sociology), a professional Artist, and a blogger. I do painting, sketches since my childhood. I am in the teaching for 10 years. In this teaching line, I have experience in teaching English at High School and College levels. I have also experienced teaching computer theory during the school teaching period. This is my personal web corner over the internet.

Quick Guides

7 Simple Steps To Start Your Blogging Journey