https://github.com/CharlesGrimont/angular-progress-bar

This component allow you to easy incorporate progress-bar to angular/ionic project, providing binding and color options
https://github.com/CharlesGrimont/angular-progress-bar

angular angular2 angular4 angular5 angular6 angular7 angular8 bar ionic ionic2 ionic3 ionic4 percent progress progress-bar progressbar toc

Last synced: 8 days ago
JSON representation

This component allow you to easy incorporate progress-bar to angular/ionic project, providing binding and color options

• Host: GitHub
• URL: https://github.com/CharlesGrimont/angular-progress-bar
• Owner: CharlesGrimont
• Created: 2017-11-07T21:58:06.000Z (about 7 years ago)
• Default Branch: develop
• Last Pushed: 2020-05-05T11:44:51.000Z (over 4 years ago)
• Last Synced: 2024-04-25T15:03:30.700Z (7 months ago)
• Topics: angular, angular2, angular4, angular5, angular6, angular7, angular8, bar, ionic, ionic2, ionic3, ionic4, percent, progress, progress-bar, progressbar, toc
• Language: TypeScript
• Homepage:
• Size: 47.9 KB
• Stars: 26
• Watchers: 2
• Forks: 17
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-angular - angular-progress-bar - This component allow you to easy incorporate progress-bar to angular/ionic project, providing binding and color options. (Uncategorized / Uncategorized)

README

        


  
 Angular Progress Bar




  

  

 


## Toc

- [Toc](#toc)

- [Introduction](#introduction)

- [Online demo](#online-demo)

- [Appearance](#appearance)

  - [Basic](#basic)

  - [Grey](#grey)

- [Installation](#installation)

- [How to use](#how-to-use)

  - [Classic way](#classic-way)

  - [Color degraded way](#color-degraded-way)

  - [Disable display of percentage](#disable-display-of-percentage)

## Introduction ##

Angular progress bar is a component available from Angular 2, 4, 5, 6, 7, 8, 9 and Ionic 2, 3, 4, and 5.

This component allow you to manage a progress visually

## Online demo ##

You can find a demo at https://angular-progress-bar-demo.stackblitz.io

## Appearance ##

### Basic ###

  

### Grey ###

  

  

## Installation ##

Type the following command to install the package:

    

```shell

npm install angular-progress-bar@latest --save

```

    

Then you need to import it into your app modules

```typescript

import {ProgressBarModule} from "angular-progress-bar"

@NgModule({

    imports: [

        ProgressBarModule

    ]

})

```

          

## How to use ##

### Classic way ###

By this way, progress property will be the value shown in the progress bar, and color property will be the color displayed

  

```html

```

### Color degraded way ###

By this way, progress property will be the value shown in the progress bar, but color-degraded property must be binded ton an object.

This object, must contains a key value made be a string that represent a percent, and the value must be an hexadecimal color

in the example show below, from 0 to 15 percent the color will be #00cbcb then from 16 to 25 percent the color will be #f9c3d3 and then from 25 to the end the color will be #fd8c8e

```html

  ```

### Disable display of percentage ###

You can disable display of percentage by using disable-percentage property

```html

  ```