<commit_before><p align="center">
  <img height="200px" width="200px" style="text-align: center;" src="https://cdn.rawgit.com/MurhafSousli/ngx-progressbar/79d7fbba96cc528238e67aadb85eafe8653198de/assets/logo.svg">
  <h1 align="center">Angular Progressbar</h1>
</p>

A nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!

___
[![npm](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://murhafsousli.github.io/ngx-progressbar/)
[![npm](https://img.shields.io/npm/v/@ngx-progressbar/core.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/ngx-progressbar) 
[![Build Status](https://travis-ci.org/MurhafSousli/ngx-progressbar.svg?branch=master)](https://www.npmjs.com/package/ngx-progressbar) 
[![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)

This is the documentation for version 3.x (supports Angular >= 5)

For Angular 2.x & 4.x use ngx-progress@2.1.1, See the [Wiki documentation](https://github.com/MurhafSousli/ngx-progressbar/wiki) 

## Table of Contents

- [Live Demo](https://MurhafSousli.github.io/ngx-progressbar)
- [Installation](#installation)
- [Usage](#usage)
- [Automagic Usage](#automagic)
  - [HttpModule requests](#http)
  - [HttpClientModule requests](#http-client)
  - [Router events](#router)
- [Misc](#misc)
- [Issues](#issues)
- [Author](#author)
- [Credits](#credits)

<a name="installation"/>

## Installation

Install it with npm

```bash
$ npm install --save @ngx-progressbar/core
```
[stackblitz](https://stackblitz.com/edit/ngx-progressbar)

<a name="usage"/>

## Usage

Import `NgProgressModule` in the root module

```ts
import { NgProgressModule } from '@ngx-progressbar/core';

@NgModule({
  imports: [
    // ...
    NgProgressModule.forRoot()
  ]
})
```

In your template

```html
<ng-progress></ng-progress>
```

Add `NgProgress` service wherever you want to use the progressbar.

```ts
import { NgProgress } from '@ngx-progressbar/core';

export class AppComponent {

  constructor(public progress: NgProgress) {
  }

  ngOnInit(){
    /** progress starts on init */
    this.progress.start();

    setTimeout(() => {
        /** progress ends after 2 seconds */
        this.progress.done();
    }, 2000);
  }
}
```
See [stackblitz demo](https://stackblitz.com/edit/ngx-progressbar)

## NgProgress Service

- `NgProgress.start()`  *Shows the progress bar*
<commit_msg>Adds stackblitz demo for v3.x<commit_after><p align="center">
  <img height="200px" width="200px" style="text-align: center;" src="https://cdn.rawgit.com/MurhafSousli/ngx-progressbar/79d7fbba96cc528238e67aadb85eafe8653198de/assets/logo.svg">
  <h1 align="center">Angular Progressbar</h1>
</p>

A nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!

___
[![npm](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://murhafsousli.github.io/ngx-progressbar/)
[![npm](https://img.shields.io/npm/v/@ngx-progressbar/core.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/ngx-progressbar) 
[![Build Status](https://travis-ci.org/MurhafSousli/ngx-progressbar.svg?branch=master)](https://www.npmjs.com/package/ngx-progressbar) 
[![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)

This is the documentation for version 3.x (supports Angular >= 5)

For Angular 2.x & 4.x use ngx-progress@2.1.1, See the [Wiki documentation](https://github.com/MurhafSousli/ngx-progressbar/wiki) 

## Table of Contents

- [Live Demo](https://MurhafSousli.github.io/ngx-progressbar) | [stackblitz for 3.x](https://stackblitz.com/edit/ngx-progressbar-v3)
- [Installation](#installation)
- [Usage](#usage)
- [Automagic Usage](#automagic)
  - [HttpModule requests](#http)
  - [HttpClientModule requests](#http-client)
  - [Router events](#router)
- [Misc](#misc)
- [Issues](#issues)
- [Author](#author)
- [Credits](#credits)

<a name="installation"/>

## Installation

Install it with npm

```bash
$ npm install --save @ngx-progressbar/core
```
[stackblitz](https://stackblitz.com/edit/ngx-progressbar)

<a name="usage"/>

## Usage

Import `NgProgressModule` in the root module

```ts
import { NgProgressModule } from '@ngx-progressbar/core';

@NgModule({
  imports: [
    // ...
    NgProgressModule.forRoot()
  ]
})
```

In your template

```html
<ng-progress></ng-progress>
```

Add `NgProgress` service wherever you want to use the progressbar.

```ts
import { NgProgress } from '@ngx-progressbar/core';

export class AppComponent {

  constructor(public progress: NgProgress) {
  }

  ngOnInit(){
    /** progress starts on init */
    this.progress.start();

    setTimeout(() => {
        /** progress ends after 2 seconds */
        this.progress.done();
    }, 2000);
  }
}
```
See [stackblitz demo](https://stackblitz.com/edit/ngx-progressbar-v3)

## NgProgress Service

- `NgProgress.start()`  *Shows the progress bar*

{'fraction_non_alphanumeric': 0.174512987012987, 'fraction_numerical': 0.024756493506493508, 'mean_word_length': 4.569491525423729, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 25, 'https://': 25, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '446530', 'n_tokens_mistral': 1916, 'n_tokens_neox': 1728, 'n_words': 311}