https://github.com/khumozin/ngx-progress-indicator

https://github.com/khumozin/ngx-progress-indicator

Last synced: 30 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/khumozin/ngx-progress-indicator
• Owner: Khumozin
• Created: 2022-06-27T17:49:36.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-11-12T08:59:57.000Z (about 1 year ago)
• Last Synced: 2024-09-14T14:36:46.099Z (3 months ago)
• Language: TypeScript
• Size: 280 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# NgxProgressIndicator

A progress indicator library for [Angular](https://angular.io/) apps.

## Installation

You can install it through **Angular CLI**:

```bash

ng add ngx-progress-indicator

```

or with **npm**:

```bash

# For Angular version 13

npm i ngx-progress-indicator@2

# For Angular version 14

npm i ngx-progress-indicator@3

# For Angular version 15

npm i ngx-progress-indicator@4

# For Angular version 16

npm i ngx-progress-indicator@5

```

When you install using **npm**, you will also need to import `NgxProgressIndicatorModule` in your `app.module`. You can also set global NgxProgressIndicator config ([`Partial`](#ngxprogressindicatorconfig)) here.:

```typescript

import { NgxProgressIndicatorModule } from 'ngx-progress-indicator';

@NgModule({

  imports: [NgxProgressIndicatorModule.forRoot({ color: '#0083ff' })],

})

class AppModule {}

```

## Basic Usage

```typescript

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

import { NgxProgressIndicatorService } from 'ngx-progress-indicator';

import { interval, take } from 'rxjs';

@Component({

  ...

})

export class AppComponent {

    constructor(private service: NgxProgressIndicatorService) {

        // show ngx progress indicator

        this.service.start();

        interval(3000)

            .pipe(take(1))

            .subscribe({

                next: () => this.service.finish() // hide ngx progress indicator after 3 seconds

            });

    }

}

```

## NgxProgressIndicatorConfig

| Name         | Type      | Description                                                       |

| ------------ | --------- | ----------------------------------------------------------------- |

| size | `number` or `string` | The size (height) of the progress indicator. Numeric values get converted to px.
_Default: false_ |

| color | `string` | Color of the progress bar. Also used for the glow around the bar.
_Default: false_ |

| className | `string` | Class name used for the progress bar element.
_Default: false_ |

| delay | `number` | How many milliseconds to wait before the progress bar animation starts after calling .start().
_Default: false_ |

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

## License

[MIT](https://choosealicense.com/licenses/mit/)