https://github.com/pleerock/ng2-progress-bar

Simple progress bar control for your angular2 applications using bootstrap3.
https://github.com/pleerock/ng2-progress-bar

Last synced: about 1 month ago
JSON representation

Simple progress bar control for your angular2 applications using bootstrap3.

• Host: GitHub
• URL: https://github.com/pleerock/ng2-progress-bar
• Owner: pleerock
• Archived: true
• Created: 2016-03-02T10:29:22.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-04-03T07:57:57.000Z (over 7 years ago)
• Last Synced: 2024-05-21T15:18:19.231Z (4 months ago)
• Language: TypeScript
• Size: 14.6 KB
• Stars: 21
• Watchers: 3
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-angular-components - ng2-progress-bar - Simple progress bar control for your angular2 applications using bootstrap3. (Uncategorized / Uncategorized)

README

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

    ```json

    {

        "map": {

            "ngx-progress-bar": "node_modules/ngx-progress-bar"

        },

        "packages": {

            "ngx-progress-bar": { "main": "index.js", "defaultExtension": "js" }

        }

    }

    ```

## Usage

```typescript

```

* `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

```typescript

import {Component} from "@angular/core";

import {ProgressBarModule} from "ngx-progress-bar";

@Component({

    selector: "app",

    template: `

    


        

    

    `

})

export class App {


}

@NgModule({

    imports: [

        // ...

        ProgressBarModule

    ],

    declarations: [

        App

    ],

    bootstrap: [

        App

    ]

})

export class AppModule {

}

```

Take a look on samples in [./sample](https://github.com/pleerock/ngx-progress-bar/tree/master/sample) for more examples of

usages.