<NME> README.md
<BEF> # ng2-slim-loading-bar [![Build Status](https://travis-ci.org/akserg/ng2-slim-loading-bar.svg?branch=master)](https://travis-ci.org/akserg/ng2-slim-loading-bar) [![npm version](https://img.shields.io/npm/v/ng2-slim-loading-bar.svg)](https://www.npmjs.com/package/ng2-slim-loading-bar) [![npm monthly downloads](https://img.shields.io/npm/dm/ng2-slim-loading-bar.svg?style=flat-square)](https://www.npmjs.com/package/ng2-slim-loading-bar)[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![Dependency Status](https://david-dm.org/akserg/ng2-slim-loading-bar.svg)](https://david-dm.org/akserg/ng2-slim-loading-bar)[![devDependency Status](https://david-dm.org/akserg/ng2-slim-loading-bar/dev-status.svg)](https://david-dm.org/akserg/ng2-slim-loading-bar#info=devDependencies)
===============
Angular2 component shows slim loading bar at the top of the page of your application.

Follow me [![twitter](https://img.shields.io/twitter/follow/akopkokhyants.svg?style=social&label=%20akopkokhyants)](https://twitter.com/akopkokhyants) to be notified about new releases.

Simple examples using ng2-slim-loading-bar:
- with SystemJS in [ng2-systemjs-demo](https://github.com/akserg/ng2-systemjs-demo)
- with Webpack in [ng2-webpack-demo](https://github.com/akserg/ng2-webpack-demo)

Online demo available [here](http://akserg.github.io/ng2-webpack-demo)

## Installation
First you need to install the npm module:
```sh
npm install ng2-slim-loading-bar --save
```

If you use SystemJS to load your files, you might have to update your config with this if you don't use `defaultJSExtensions: true`:
```js
System.config({

## Usage

If you use SystemJS to load your files, you might have to update your config:

```js
System.config({
    map: {
        'ng2-slim-loading-bar': 'node_modules/ng2-slim-loading-bar/bundles/index.umd.js'
    }
});
```

#### 1. Update the markup
- Import the `style.css` file into your web page
- Add `<ng2-slim-loading-bar></ng2-slim-loading-bar>` tag in template of your application component.

#### 2. Import the `SlimLoadingBarModule`
Import `SlimLoadingBarModule.forRoot()` in the NgModule of your application.
The `forRoot` method is a convention for modules that provide a singleton service.

```ts
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from '@angular/core';
import {SlimLoadingBarModule} from 'ng2-slim-loading-bar';

@NgModule({
    imports: [
        BrowserModule,
        SlimLoadingBarModule.forRoot()
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}
```

If you have multiple NgModules and you use one as a shared NgModule (that you import in all of your other NgModules),
don't forget that you can use it to export the `SlimLoadingBarModule` that you imported in order to avoid having to import it multiple times.

```ts
@NgModule({
    imports: [
        BrowserModule,
        SlimLoadingBarModule.forRoot()
    ],
    exports: [BrowserModule, SlimLoadingBarModule],
})
export class SharedModule {
}
```

#### 3. Use the `SlimLoadingBarService` for your application
- Import `SlimLoadingBarService` from `ng2-slim-loading-bar` in your application code:

```js
import {Component} from '@angular/core';
import {SlimLoadingBarService} from 'ng2-slim-loading-bar';

@Component({
    selector: 'app',
    template: `
        <div>Hello world</div>
        <button (click)="startLoading()">Start Loading</button>
        <button (click)="stopLoading()">Stop Loading</button>
        <button (click)="completeLoading()">Complete Loading</button>
        <ng2-slim-loading-bar></ng2-slim-loading-bar>
    `
})
export class AppComponent {

    constructor(private slimLoadingBarService: SlimLoadingBarService) { }

    startLoading() {
        this.slimLoadingBarService.start(() => {
            console.log('Loading complete');
        });
    }

    stopLoading() {
        this.slimLoadingBarService.stop();
    }

    completeLoading() {
        this.slimLoadingBarService.complete();
    }
}
```

#### 3. Customize the the `ng2-slim-loading-bar` for your application
You can use the following properties to customize the `ng2-slim-loading-bar` component in your template:
- `color` - The color of loading bar. Default is `firebrick`. It can be any CSS compatible value.
- `height` - The height of loading bar. Default value is `2px`.
- `show` - The flag helps hide and show the loading bar. Default value is `true`.

Example: 
`<ng2-slim-loading-bar color="blue" height="4px"></ng2-slim-loading-bar>`

#### 4. Manage the loading bar
You can use the following properties to customize the SlimLoadingBar via instance of SlimLoadingBarService:
- `color` - The color of loading bar.
- `height` - The height of loading bar.
- `visible` - The flag helps hide and show the loading bar, false for hidden and true for visible.

You can use the following methods to control the SlimLoadingBar via instance of SlimLoadingBarService:
- `start` - Start the loading progress. Use the callback function as an parameter to listed the complete event.
- `stop` - Stop the loading progress. This method pause the current position of loading progress.
- `reset`- Reset the position of loading progress to 0.
- `complete` - Set the progress to 100% and hide the progress bar.

#### 5. Events handling
You can hook up with our different types of events thrown.
- `SlimLoadingBarEventType.PROGRESS`
- `SlimLoadingBarEventType.HEIGHT`
- `SlimLoadingBarEventType.COLOR`
- `SlimLoadingBarEventType.VISIBLE`

you can subscribe to these events types by simplying doing this
```js
 constructor(private _loadingBar: SlimLoadingBarService) {
    this._loadingBar.events.subscribe((item:SlimLoadingBarEvent) => console.log(item));
   }
```
where item returned is of `SlimLoadingBarEvent {type: SlimLoadingBarEventType, value: any}`

# Credits 
Inspired by [ngProgress.js](https://github.com/VictorBjelkholm/ngProgress)

# License
 [MIT](/LICENSE)

<MSG> Updated README

<DFF> @@ -1,21 +1,26 @@
-# ng2-slim-loading-bar [![Build Status](https://travis-ci.org/akserg/ng2-slim-loading-bar.svg?branch=master)](https://travis-ci.org/akserg/ng2-slim-loading-bar) [![npm version](https://img.shields.io/npm/v/ng2-slim-loading-bar.svg)](https://www.npmjs.com/package/ng2-slim-loading-bar) [![npm monthly downloads](https://img.shields.io/npm/dm/ng2-slim-loading-bar.svg?style=flat-square)](https://www.npmjs.com/package/ng2-slim-loading-bar)[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![Dependency Status](https://david-dm.org/akserg/ng2-slim-loading-bar.svg)](https://david-dm.org/akserg/ng2-slim-loading-bar)[![devDependency Status](https://david-dm.org/akserg/ng2-slim-loading-bar/dev-status.svg)](https://david-dm.org/akserg/ng2-slim-loading-bar#info=devDependencies)
-===============
+# Angular 2 Slim Loading Bar [![npm version](https://img.shields.io/npm/v/ng2-slim-loading-bar.svg)](https://www.npmjs.com/package/ng2-slim-loading-bar) [![npm monthly downloads](https://img.shields.io/npm/dm/ng2-slim-loading-bar.svg?style=flat-square)](https://www.npmjs.com/package/ng2-slim-loading-bar)
 Angular2 component shows slim loading bar at the top of the page of your application.
 
+[![Build Status](https://travis-ci.org/akserg/ng2-slim-loading-bar.svg?branch=master)](https://travis-ci.org/akserg/ng2-slim-loading-bar) 
+[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) 
+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) 
+[![Dependency Status](https://david-dm.org/akserg/ng2-slim-loading-bar.svg)](https://david-dm.org/akserg/ng2-slim-loading-bar)
+[![devDependency Status](https://david-dm.org/akserg/ng2-slim-loading-bar/dev-status.svg)](https://david-dm.org/akserg/ng2-slim-loading-bar#info=devDependencies)
+
 Follow me [![twitter](https://img.shields.io/twitter/follow/akopkokhyants.svg?style=social&label=%20akopkokhyants)](https://twitter.com/akopkokhyants) to be notified about new releases.
 
+## Installation
+```sh
+npm install ng2-slim-loading-bar --save
+
+## Demo
 Simple examples using ng2-slim-loading-bar:
 - with SystemJS in [ng2-systemjs-demo](https://github.com/akserg/ng2-systemjs-demo)
 - with Webpack in [ng2-webpack-demo](https://github.com/akserg/ng2-webpack-demo)
 
 Online demo available [here](http://akserg.github.io/ng2-webpack-demo)
 
-## Installation
-First you need to install the npm module:
-```sh
-npm install ng2-slim-loading-bar --save
-```
-
+## Usage
 If you use SystemJS to load your files, you might have to update your config with this if you don't use `defaultJSExtensions: true`:
 ```js
 System.config({

{'commit': "diff --git a/README.md b/README.md\nindex 6cc8c46..574e75a 100644\n--- a/README.md\n+++ b/README.md\n@@ -1,21 +1,26 @@\n-# ng2-slim-loading-bar [![Build Status](https://travis-ci.org/akserg/ng2-slim-loading-bar.svg?branch=master)](https://travis-ci.org/akserg/ng2-slim-loading-bar) [![npm version](https://img.shields.io/npm/v/ng2-slim-loading-bar.svg)](https://www.npmjs.com/package/ng2-slim-loading-bar) [![npm monthly downloads](https://img.shields.io/npm/dm/ng2-slim-loading-bar.svg?style=flat-square)](https://www.npmjs.com/package/ng2-slim-loading-bar)[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![Dependency Status](https://david-dm.org/akserg/ng2-slim-loading-bar.svg)](https://david-dm.org/akserg/ng2-slim-loading-bar)[![devDependency Status](https://david-dm.org/akserg/ng2-slim-loading-bar/dev-status.svg)](https://david-dm.org/akserg/ng2-slim-loading-bar#info=devDependencies)\n-===============\n+# Angular 2 Slim Loading Bar [![npm version](https://img.shields.io/npm/v/ng2-slim-loading-bar.svg)](https://www.npmjs.com/package/ng2-slim-loading-bar) [![npm monthly downloads](https://img.shields.io/npm/dm/ng2-slim-loading-bar.svg?style=flat-square)](https://www.npmjs.com/package/ng2-slim-loading-bar)\n Angular2 component shows slim loading bar at the top of the page of your application.\n \n+[![Build Status](https://travis-ci.org/akserg/ng2-slim-loading-bar.svg?branch=master)](https://travis-ci.org/akserg/ng2-slim-loading-bar) \n+[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) \n+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) \n+[![Dependency Status](https://david-dm.org/akserg/ng2-slim-loading-bar.svg)](https://david-dm.org/akserg/ng2-slim-loading-bar)\n+[![devDependency Status](https://david-dm.org/akserg/ng2-slim-loading-bar/dev-status.svg)](https://david-dm.org/akserg/ng2-slim-loading-bar#info=devDependencies)\n+\n Follow me [![twitter](https://img.shields.io/twitter/follow/akopkokhyants.svg?style=social&label=%20akopkokhyants)](https://twitter.com/akopkokhyants) to be notified about new releases.\n \n+## Installation\n+```sh\n+npm install ng2-slim-loading-bar --save\n+\n+## Demo\n Simple examples using ng2-slim-loading-bar:\n - with SystemJS in [ng2-systemjs-demo](https://github.com/akserg/ng2-systemjs-demo)\n - with Webpack in [ng2-webpack-demo](https://github.com/akserg/ng2-webpack-demo)\n \n Online demo available [here](http://akserg.github.io/ng2-webpack-demo)\n \n-## Installation\n-First you need to install the npm module:\n-```sh\n-npm install ng2-slim-loading-bar --save\n-```\n-\n+## Usage\n If you use SystemJS to load your files, you might have to update your config with this if you don't use `defaultJSExtensions: true`:\n ```js\n System.config({\n", 'commit_subject': 'Updated README', 'repo_name': 'akserg/ng2-slim-loading-bar', 'committer': {'name': 'Sergey Akopkokhyants', 'email': '5c473beacdfd60cff6e5f37c1962027dcefaa2aa@gmail.com', 'time_sec': '1469989974', 'tz_offset': '120', 'date': {'seconds': '1469989974'}}, 'commit_tree': '4cb74303996a30900356c4db51a5ac4e2a6cebac', 'commit_message': 'Updated README\n', 'language_name': 'JavaScript', 'license': 'mit', 'hunks': "@@ -1,21 +1,26 @@\n-# ng2-slim-loading-bar [![Build Status](https://travis-ci.org/akserg/ng2-slim-loading-bar.svg?branch=master)](https://travis-ci.org/akserg/ng2-slim-loading-bar) [![npm version](https://img.shields.io/npm/v/ng2-slim-loading-bar.svg)](https://www.npmjs.com/package/ng2-slim-loading-bar) [![npm monthly downloads](https://img.shields.io/npm/dm/ng2-slim-loading-bar.svg?style=flat-square)](https://www.npmjs.com/package/ng2-slim-loading-bar)[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![Dependency Status](https://david-dm.org/akserg/ng2-slim-loading-bar.svg)](https://david-dm.org/akserg/ng2-slim-loading-bar)[![devDependency Status](https://david-dm.org/akserg/ng2-slim-loading-bar/dev-status.svg)](https://david-dm.org/akserg/ng2-slim-loading-bar#info=devDependencies)\n-===============\n+# Angular 2 Slim Loading Bar [![npm version](https://img.shields.io/npm/v/ng2-slim-loading-bar.svg)](https://www.npmjs.com/package/ng2-slim-loading-bar) [![npm monthly downloads](https://img.shields.io/npm/dm/ng2-slim-loading-bar.svg?style=flat-square)](https://www.npmjs.com/package/ng2-slim-loading-bar)\n Angular2 component shows slim loading bar at the top of the page of your application.\n \n+[![Build Status](https://travis-ci.org/akserg/ng2-slim-loading-bar.svg?branch=master)](https://travis-ci.org/akserg/ng2-slim-loading-bar) \n+[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) \n+[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) \n+[![Dependency Status](https://david-dm.org/akserg/ng2-slim-loading-bar.svg)](https://david-dm.org/akserg/ng2-slim-loading-bar)\n+[![devDependency Status](https://david-dm.org/akserg/ng2-slim-loading-bar/dev-status.svg)](https://david-dm.org/akserg/ng2-slim-loading-bar#info=devDependencies)\n+\n Follow me [![twitter](https://img.shields.io/twitter/follow/akopkokhyants.svg?style=social&label=%20akopkokhyants)](https://twitter.com/akopkokhyants) to be notified about new releases.\n \n+## Installation\n+```sh\n+npm install ng2-slim-loading-bar --save\n+\n+## Demo\n Simple examples using ng2-slim-loading-bar:\n - with SystemJS in [ng2-systemjs-demo](https://github.com/akserg/ng2-systemjs-demo)\n - with Webpack in [ng2-webpack-demo](https://github.com/akserg/ng2-webpack-demo)\n \n Online demo available [here](http://akserg.github.io/ng2-webpack-demo)\n \n-## Installation\n-First you need to install the npm module:\n-```sh\n-npm install ng2-slim-loading-bar --save\n-```\n-\n+## Usage\n If you use SystemJS to load your files, you might have to update your config with this if you don't use `defaultJSExtensions: true`:\n ```js\n System.config({\n", 'addition_count': 13, 'deletion_count': 8, 'src_file': 'a/README.md', 'tgt_file': 'b/README.md', 'file_extension': '.md', 'before_file': '# ng2-slim-loading-bar [![Build Status](https://travis-ci.org/akserg/ng2-slim-loading-bar.svg?branch=master)](https://travis-ci.org/akserg/ng2-slim-loading-bar) [![npm version](https://img.shields.io/npm/v/ng2-slim-loading-bar.svg)](https://www.npmjs.com/package/ng2-slim-loading-bar) [![npm monthly downloads](https://img.shields.io/npm/dm/ng2-slim-loading-bar.svg?style=flat-square)](https://www.npmjs.com/package/ng2-slim-loading-bar)[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![Dependency Status](https://david-dm.org/akserg/ng2-slim-loading-bar.svg)](https://david-dm.org/akserg/ng2-slim-loading-bar)[![devDependency Status](https://david-dm.org/akserg/ng2-slim-loading-bar/dev-status.svg)](https://david-dm.org/akserg/ng2-slim-loading-bar#info=devDependencies)\n===============\nAngular2 component shows slim loading bar at the top of the page of your application.\n\nFollow me [![twitter](https://img.shields.io/twitter/follow/akopkokhyants.svg?style=social&label=%20akopkokhyants)](https://twitter.com/akopkokhyants) to be notified about new releases.\n\nSimple examples using ng2-slim-loading-bar:\n- with SystemJS in [ng2-systemjs-demo](https://github.com/akserg/ng2-systemjs-demo)\n- with Webpack in [ng2-webpack-demo](https://github.com/akserg/ng2-webpack-demo)\n\nOnline demo available [here](http://akserg.github.io/ng2-webpack-demo)\n\n## Installation\nFirst you need to install the npm module:\n```sh\nnpm install ng2-slim-loading-bar --save\n```\n\nIf you use SystemJS to load your files, you might have to update your config with this if you don\'t use `defaultJSExtensions: true`:\n```js\nSystem.config({\n\n## Usage\n\nIf you use SystemJS to load your files, you might have to update your config:\n\n```js\nSystem.config({\n    map: {\n        \'ng2-slim-loading-bar\': \'node_modules/ng2-slim-loading-bar/bundles/index.umd.js\'\n    }\n});\n```\n\n#### 1. Update the markup\n- Import the `style.css` file into your web page\n- Add `<ng2-slim-loading-bar></ng2-slim-loading-bar>` tag in template of your application component.\n\n#### 2. Import the `SlimLoadingBarModule`\nImport `SlimLoadingBarModule.forRoot()` in the NgModule of your application.\nThe `forRoot` method is a convention for modules that provide a singleton service.\n\n```ts\nimport {BrowserModule} from "@angular/platform-browser";\nimport {NgModule} from \'@angular/core\';\nimport {SlimLoadingBarModule} from \'ng2-slim-loading-bar\';\n\n@NgModule({\n    imports: [\n        BrowserModule,\n        SlimLoadingBarModule.forRoot()\n    ],\n    bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nIf you have multiple NgModules and you use one as a shared NgModule (that you import in all of your other NgModules),\ndon\'t forget that you can use it to export the `SlimLoadingBarModule` that you imported in order to avoid having to import it multiple times.\n\n```ts\n@NgModule({\n    imports: [\n        BrowserModule,\n        SlimLoadingBarModule.forRoot()\n    ],\n    exports: [BrowserModule, SlimLoadingBarModule],\n})\nexport class SharedModule {\n}\n```\n\n#### 3. Use the `SlimLoadingBarService` for your application\n- Import `SlimLoadingBarService` from `ng2-slim-loading-bar` in your application code:\n\n```js\nimport {Component} from \'@angular/core\';\nimport {SlimLoadingBarService} from \'ng2-slim-loading-bar\';\n\n@Component({\n    selector: \'app\',\n    template: `\n        <div>Hello world</div>\n        <button (click)="startLoading()">Start Loading</button>\n        <button (click)="stopLoading()">Stop Loading</button>\n        <button (click)="completeLoading()">Complete Loading</button>\n        <ng2-slim-loading-bar></ng2-slim-loading-bar>\n    `\n})\nexport class AppComponent {\n\n    constructor(private slimLoadingBarService: SlimLoadingBarService) { }\n\n    startLoading() {\n        this.slimLoadingBarService.start(() => {\n            console.log(\'Loading complete\');\n        });\n    }\n\n    stopLoading() {\n        this.slimLoadingBarService.stop();\n    }\n\n    completeLoading() {\n        this.slimLoadingBarService.complete();\n    }\n}\n```\n\n#### 3. Customize the the `ng2-slim-loading-bar` for your application\nYou can use the following properties to customize the `ng2-slim-loading-bar` component in your template:\n- `color` - The color of loading bar. Default is `firebrick`. It can be any CSS compatible value.\n- `height` - The height of loading bar. Default value is `2px`.\n- `show` - The flag helps hide and show the loading bar. Default value is `true`.\n\nExample: \n`<ng2-slim-loading-bar color="blue" height="4px"></ng2-slim-loading-bar>`\n\n#### 4. Manage the loading bar\nYou can use the following properties to customize the SlimLoadingBar via instance of SlimLoadingBarService:\n- `color` - The color of loading bar.\n- `height` - The height of loading bar.\n- `visible` - The flag helps hide and show the loading bar, false for hidden and true for visible.\n\nYou can use the following methods to control the SlimLoadingBar via instance of SlimLoadingBarService:\n- `start` - Start the loading progress. Use the callback function as an parameter to listed the complete event.\n- `stop` - Stop the loading progress. This method pause the current position of loading progress.\n- `reset`- Reset the position of loading progress to 0.\n- `complete` - Set the progress to 100% and hide the progress bar.\n\n#### 5. Events handling\nYou can hook up with our different types of events thrown.\n- `SlimLoadingBarEventType.PROGRESS`\n- `SlimLoadingBarEventType.HEIGHT`\n- `SlimLoadingBarEventType.COLOR`\n- `SlimLoadingBarEventType.VISIBLE`\n\nyou can subscribe to these events types by simplying doing this\n```js\n constructor(private _loadingBar: SlimLoadingBarService) {\n    this._loadingBar.events.subscribe((item:SlimLoadingBarEvent) => console.log(item));\n   }\n```\nwhere item returned is of `SlimLoadingBarEvent {type: SlimLoadingBarEventType, value: any}`\n\n# Credits \nInspired by [ngProgress.js](https://github.com/VictorBjelkholm/ngProgress)\n\n# License\n [MIT](/LICENSE)\n', 'message': 'Updated README\n', 'author_name': 'Sergey Akopkokhyants', 'lang': 'md'}