# angular-gradient-progressbar

> Angular Gradient Progress Bar

Latest version **1.0.1** (published 2024-05-11) · 0 weekly downloads

## Install

```sh
npm install angular-gradient-progressbar
pnpm add angular-gradient-progressbar
yarn add angular-gradient-progressbar
bun add angular-gradient-progressbar
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2024-05-11 |
| First published | 2020-08-02 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 76.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | aditbharadwaj |
| Keywords | angular, css, progressbar, ts |

## Links

- npm: https://www.npmjs.com/package/angular-gradient-progressbar
- Repository: https://github.com/aditbharadwaj/angular-gradient-progressbar
- Homepage: https://github.com/aditbharadwaj/angular-gradient-progressbar#readme
- Issues: https://github.com/aditbharadwaj/angular-gradient-progressbar/issues
- npm.io page: https://npm.io/package/angular-gradient-progressbar

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.6.2

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2024-05-11
- 1.0.0 — 2024-04-01
- 0.0.1-1.1 — 2021-08-20
- 0.0.11 — 2021-08-20
- 0.0.10 — 2020-09-02
- 0.0.9 — 2020-08-03
- 0.0.8 — 2020-08-03
- 0.0.7 — 2020-08-02
- 0.0.6 — 2020-08-02
- 0.0.5 — 2020-08-02
- 0.0.4 — 2020-08-02
- 0.0.3 — 2020-08-02
- 0.0.2 — 2020-08-02
- 0.0.1 — 2020-08-02

## README

<p align="center">
   <h1>Angular Gradient Progress Bar</h1>
</p>
<!-- Badges -->
<p align="center">
<a href="https://www.npmjs.com/package/angular-gradient-progressbar"><img src="https://img.shields.io/npm/dw/angular-gradient-progressbar"/>
</a>
<a href="https://www.npmjs.com/package/angular-gradient-progressbar"><img src="https://img.shields.io/npm/v/angular-gradient-progressbar?color=red"/>
</a>
<a href="https://github.com/aditbharadwaj/angular-gradient-progressbar"><img src="https://img.shields.io/github/stars/aditbharadwaj/angular-gradient-progressbar?label=github%20Stars&style=social"/>
</a>
</p>

<!-- end -->

## Gradient Angular Progress bar

<p>This angular package provides 2 variants of the progress bars that can be used:
  
   a. Advance Progress Bar
  <img src="https://user-images.githubusercontent.com/6751554/89441965-9c2eb280-d76b-11ea-85ca-3f2e1868cf51.PNG"/>
   
   b. Simple Progress Bar   
  <img src="https://user-images.githubusercontent.com/6751554/89295854-3664fc80-d67f-11ea-98d8-a422c62d8b65.PNG"/>
     
     
</p>

## StackBlitz

[StackBlitz](https://stackblitz.com/edit/angular-ivy-9ugyso?file=src/app/app.component.html) Demo here !

## Support

<p>For any support requests please contact </p>

> contact@tekspect.com

## 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]="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>`

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](https://dev.to/raisaugat/how-to-show-progress-percentage-in-gradient-bar-2k61) to angular and converted into a [Npm Package](https://www.npmjs.com/package/angular-gradient-progressbar)

## 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](https://karma-runner.github.io).

---
_Source: https://npm.io/package/angular-gradient-progressbar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._