ngx-simple-progress-bar

Angular 'ngx-simple-progress-bar' is an easy-to-use, customizable component, which can show both dynamic loading and
static progress.

NPM package: https://www.npmjs.com/package/ngx-simple-progress-bar

$3

The library's major version is the same as the Angular version it requires, that is,
e.g. 12.0.0 is for Angular 12 (and upwards). Lowest available version is 9.0.0.

$3

npm install ngx-simple-progress-bar --save

$3

An example app is available here

$3

1. Install the library via npm

2. If you use NgModules, import NgxSimpleProgressBarModule into your AppModule:

``
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NgxSimpleProgressBarModule } from 'ngx-simple-progress-bar';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxSimpleProgressBarModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
`

3. Use in your component's template and customize it as you prefer:

`



`
Don't forget to set the width of the container div as the full length of the progress bar fits its container.

4. From version 17.0.0 upwards (compatible with Angular 17), the progress bar is also available as a standalone component.
Use in your component's template and customize it exactly the same way as the non-standalone component:

`



`

5. You can inject NgxSimpleProgressBarService into your component and use its methods for dynamic loading
functionality:

`
import { Component, OnInit } from '@angular/core';
import { NgxSimpleProgressBarService } from 'ngx-simple-progress-bar';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
percent: number;
speed: number;

constructor(private readonly progressBarService: NgxSimpleProgressBarService) {
}

ngOnInit(): void {
this.percent = 50;
this.speed = 100;
}

start(): void {
this.progressBarService.startProgress(this.percent, this.speed);
}

stop(): void {
this.progressBarService.stopProgress();
}

reset(): void {
this.progressBarService.resetProgress();
}

complete(): void {
this.progressBarService.completeProgress();
}

onPercentChange(changedPercent: number): void {
this.percent = changedPercent;
}
}

`
When the above service methods are used, NgxSimpleProgressBarComponent's percentChange event is emitted to give
feedback to the host component about the updated value of the percent.



$3

You can set the following properties of the progress bar:

- percent: by default 0, it shows the current state of progress by setting the inner bar's width

- isStatic: by default true, its value describes whether the service's methods are blocked; set it to false to allow
the service methods to change the percent dynamically

- progressBarType: there are 3 types of progress bar designs available:
- classic: default, outer bar with padding, rounded edges
- rounded: inner bar's height is the same as the outer bar's, rounded edges
- square: inner bar's height is the same as the outer bar's, no rounding

- color: the background color of the inner bar, default: #4d94f7

- backgroundColor: the background color of the outer bar, default: #efefef; with rounded/square designs you can set it
to transparent in order to hide the full length of the progress bar

- height: the outer bar's height (defaults: 22px for classic, 12px for rounded, 5px for square)

$3

NgxSimpleProgressBarService internally uses interval from rxjs: when we launch the progress, we can set the
initial percent from which to start out as well as the 'speed', that is, the number of milliseconds at which
rate interval emits its next number and our percent is increased by 1. Default percent is 0; default speed is 50
milliseconds. Thus, the method startProgress() can have 0, 1 or 2 parameters:
startProgress() / startProgress(percent) / startProgress(percent, speed)

The method stopProgress() stops the progress and the last percent value is preserved.

The method resetProgress() sets the percent to 0; if not stopped, the increase of percents resumes.

The method completeProgress()` speeds up the progress (1 percent increase every 5 milliseconds) and the progress stops
at 100%.