pleerock / ngx-progress-bar

Simple progress bar control for your angular2 applications using bootstrap3.

This repository is for demonstration purposes of how it can be implemented in Angular and is not maintaned. Please fork and maintain your own version of this repository.

ngx-progress-bar

Simple progress bar control for your angular2 applications using bootstrap3. Does not depend of jquery. If you don't want to use it without bootstrap - simply create proper css classes. Please star a project if you liked it, or create an issue if you have problems with it.

Installation

1. Install npm module:

   npm install ngx-progress-bar --save

2. If you are using system.js you may want to add this into map and package config:

   {
       "map": {
           "ngx-progress-bar": "node_modules/ngx-progress-bar"
       },
       "packages": {
           "ngx-progress-bar": { "main": "index.js", "defaultExtension": "js" }
       }
   }

Usage

<progress-bar [value]="50" [max]="100" title="Text to be put in the progress bar"></progress-bar>

• value is a progress number
• max is a maximal number of the progress. By default is 100.
• title is a text that will be shown in the progress bar. This is optional.

Sample

import {Component} from "@angular/core";
import {ProgressBarModule} from "ngx-progress-bar";

@Component({
    selector: "app",
    template: `
    <div class="container">
        <progress-bar [value]="50" [max]="100"></progress-bar>
    </div>
    `
})
export class App {

}

@NgModule({
    imports: [
        // ...
        ProgressBarModule
    ],
    declarations: [
        App
    ],
    bootstrap: [
        App
    ]
})
export class AppModule {

}

Take a look on samples in ./sample for more examples of usages.