Request Progress Bar

A fully customizable and easy-to-use request progress bar for your Angular applications. The package works by listening to all incoming requests via an HTTP interceptor, and displays the loading state to your users.

Author

Bill Nice

Features

• Customizable bar color
• Automatically starts working when added to your root component
• Option to set loading state manually
• Animated transitions for a more user-friendly experience

Installation

You can install the request-progress-bar package using npm:

1npm i @billnice/request-progress-bar

Usage

To use the Request Progress Bar component, you can add the request-progress-bar component to your root component, for example:

1@Component({
2  selector: 'app-root',
3  template: `
4    <request-progress-bar [barColor]="'#ff0000'"></request-progress-bar>
5    <router-outlet></router-outlet>
6  `,
7})
8export class AppComponent {}

Make sure to include the RequestProgressBarModule in your AppModule:

1import { RequestProgressBarModule } from '@billnice/request-progress-bar';
2
3@NgModule({
4  declarations: [AppComponent],
5  imports: [BrowserModule, RequestProgressBarModule],
6  providers: [],
7  bootstrap: [AppComponent],
8})
9export class AppModule {}

In the example above, the Request Progress Bar component is included in the root component and the color is set to red.

Options

The Request Progress Bar component has the following options:

• barColor: The color of the progress bar. Default value is #ff0000.
• IsLoading: a boolean that controls the state of the progress bar.

Customizing the Progress Bar Color

You can customize the color of the progress bar by setting the barColor input property. For example:

1    <request-progress-bar [barColor]="'#00ff00'" ></request-progress-bar>

In the example above, the color of the progress bar is set to green.

Conclusion

The Request Progress Bar component is a convenient and easy-to-use solution for showing the progress of HTTP requests in your Angular application. With its built-in interceptor and customizable progress bar color, you can easily integrate it into your application and start using it right away.