Skip to main content
The ProgressBarService manages the state and configuration of the progress bar displayed in the toolbar. It provides methods to show different progress bar modes (indeterminate, query, buffer) and hide the progress bar.

​
Location

src/app/services/progress-bar/progress-bar.service.ts

​
Properties

​
progressBarConfiguration
Signal<ProgressBarConfiguration>
Read-only signal containing the current progress bar configuration including visibility, mode, and values.

​
Methods

​
showIndeterminateProgressBar()

Shows an indeterminate progress bar that animates continuously without a specific completion percentage. 
progressBarService.showIndeterminateProgressBar();
Use case: Long-running operations where progress cannot be measured (e.g., waiting for API response).

​
showQueryProgressBar()

Shows a query-style progress bar (reverse indeterminate animation from right to left). 
progressBarService.showQueryProgressBar();
Use case: Data fetching operations like GET requests.

​
showBufferProgressBar(bufferValue, value)

Shows a buffer-style progress bar with both a primary value and buffer value.
​
bufferValue
number
required
The buffer value (0-100) indicating cached or buffered progress
​
value
number
required
The primary value (0-100) indicating actual progress
progressBarService.showBufferProgressBar(75, 50);
Use case: File uploads or downloads where buffering is involved.

​
hideProgressBar()

Hides the progress bar from view. 
progressBarService.hideProgressBar();

​
ProgressBarConfiguration Interface

interface ProgressBarConfiguration {
  bufferValue: number;      // Buffer value (0-100)
  isVisible: boolean;       // Visibility state
  mode: 'indeterminate' | 'query' | 'buffer' | 'determinate';
  value: number;            // Primary value (0-100)
}

​
Usage with HTTP Interceptor

The service is automatically integrated with the progressBarInterceptor which displays:
  • Query mode for GET, HEAD, OPTIONS requests
  • Indeterminate mode for POST, PUT, PATCH, DELETE requests
// Manual usage in a component
import { inject } from '@angular/core';
import { ProgressBarService } from '@jet/services/progress-bar/progress-bar.service';

export class MyComponent {
  readonly #progressBarService = inject(ProgressBarService);

  async performLongOperation() {
    this.#progressBarService.showIndeterminateProgressBar();
    
    try {
      await this.someAsyncOperation();
    } finally {
      this.#progressBarService.hideProgressBar();
    }
  }
}

​
Implementation Details

  • All configuration changes are queued with a 90ms debounce to prevent flickering
  • State is managed via Angular signals for reactive updates
  • The service is provided in root and available application-wide
  • Used by the ToolbarComponent to display the progress bar
The progress bar automatically appears in the toolbar when isVisible is true. No additional setup required.

Build docs developers (and LLMs) love

Get started for freeTalk to us