<h1 align="cen
A nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!
If you identify any errors in the library, or have an idea for an improvement, please open an issue.
Murhaf Sousli
MurhafSousli
ngProgressHttp gives an error with http requests inside effects, closes #386NgProgressRef directive has (started) and (completed) outputs, instead of subjects.NgProgressRef directive has all NgProgress component inputs excepts the irrelevant styling inputs.fadeOutSpeed input to set the fade out transition after the progress completes.--ng-progress-spinner-speed CSS variable to set the spinner speed.NgProgressRef as hostDirective in NgProgress component and forward its inputs and outputs.ProgressRef directive due to config update.min and max inputs.setConfig() function from ProgressRef directive, you can now set the inputs directly.start(), complete(), inc() and set() functions from the component reference.untracked in effects instead of allowSignalWrites and setTimeout.provideNgProgressOptions() to override global options.provideNgProgressHttp() to override http related options.provideNgProgressRouter() to override router related options.fixed option has been removed in favor of relative option which does the opposite.meteor option has been removed in favor of flat option which does the opposite.spinner default option has been changed to false.NgProgress has been removed.NgProgressComponent has been renamed to NgProgress.NgProgressConfig has been renamed to NgProgressOptions.thick option, use --ng-progress-thickness and --ng-progress-spinner-thickness CSS variables instead.color option, use --ng-progress-color CSS variable instead.ease option, use --ng-progress-ease CSS variable instead.delay has been renamed to minDuration in progressbar router options.silentApis, closes #283 in 32da22c.zoom to transform: scale, closes #275 in c78dff6.Before:
silentApis used to check the url using url.startsWith()After:
silentApis checks the url using url.includes()When silentApis is used along with matcher regex, it will check if the URL matches both cases, learn more at wiki page.
NgProgressRef NgProgressRef.getState to NgProgressRef.snapshotBefore version 6, there were 3 packages each one published in its own npm package
npm i @ngx-progressbar/core @ngx-progressbar/http @ngx-progressbar/router
import { NgProgressModule } from '@ngx-progressbar/core';
import { NgProgressHttpModule } from '@ngx-progressbar/http';
import { NgProgressRouterModule } from '@ngx-progressbar/router';After version 6, all the packages is combined and published in one npm package
npm i ngx-progressbar
import { NgProgressModule } from 'ngx-progressbar';
import { NgProgressHttpModule } from 'ngx-progressbar/http';
import { NgProgressRouterModule } from 'ngx-progressbar/router';ignoreProgressBar to request's headers, closes #234 in a625d01.refactor(core, http, router): Deprecate forRoot(config?) usage, config can be provided using withConfig(config) instead, in 1b76e0b.
This removes the need to import
NgProgressModulein your root module, in other word, you no longer need to include this library in the main bundle if you are using it in lazy loaded modules.
NgProgressModule.forRoot() to NgProgressModuleIf you use custom config NgProgressModule.forRoot(config), then change it to NgProgressModule.withConfig(config)
The same applies on
NgProgressHttpModuleandNgProgressRouterModule
[fixed] option, to disable the default progress bar fixed position, closes #212 in fff21f3.startEvents and completeEvents options, closes #211 in 0f7effe.NgProgressRef.state$ to NgProgressRef.state.Map<string, NgProgressRef> for instances instead of just an object.NgProgress.NgProgress service: setConfig(), start(), set(), inc(), complete(), isStarted(), started(), completed(), destroy().Before:
It was possible to use these functions from NgProgress service directly
ngProgress.start();After:
These functions are accessed by the NgProgressRef instance
const progressRef: NgProgressRef = ngProgress.ref();
progressRef.start();NgProgressRef to integrate it with other progress bar componentsBefore:
<ng-container *ngIf="progressRef.state$ | async; let state">
<mat-progress-bar *ngIf="state.active" [value]="state.value"></mat-progress-bar>
</ng-container>After:
<ng-container *ngIf="progressRef.state | async; let state">
<mat-progress-bar *ngIf="state.active" [value]="state.value"></mat-progress-bar>
</ng-container>{providedIn: 'root'} instead of useFactory function in d31cacd.Before, to add the automagic features, we used to import NgProgressHttpModule and NgProgressRouterModule.
Now we must use forRoot() on these modules => NgProgressHttpModule.forRoot() and NgProgressRouterModule.forRoot().
warning " > @ngx-progressbar/core@5.0.0" has incorrect peer dependency "@angular/core@5.0.0".trickleFunc input. This allows users to change the trickling amount based on progress state, closes #146 in #148.ng- to avoid the side effects with other libraries, closes #125.style.transform instead of ngStyle to animate the progress.<ng-progress></ng-progress>
<ng-progress id="instance1"></ng-progress>
<ng-progress id="instance2"></ng-progress>forRoot(config)..bar-placeholder class.(started) and (complete) output to the component.start(), set(n), inc(n), complete() methods to the component.For example:
<ng-progress #progressBar></ng-progress>
<button (click)="progressBar.start()">Start</button>
<button (click)="progressBar.complete()">Complete</button>@ngx-progressbar/http-client package is deprecated in version 4.x, use @ngx-progressbar/http instead.[toggle] input has been removed from the component.NgProgress.done() has been renamed to NgProgress.complete().NgProgress.ended has been renamed to NgProgress.completed().HttpModule is deprecated, NgProgress no longer supports it.NgProgressHttpClientModule has been renamed to NgProgressHttpModule, so now the HttpClient automagic feature is published on @ngx-progressbar/httpMain package is now @ngx-progressbar/core
Auto-magic features will be used by importing its module:
@ngx-progressbar/http@ngx-progressbar/http-client@ngx-progressbar/routerremove [positionUsing] option to use translate3d only
[showSpinner] option to [spinner][spinnerPosition] options to set the spinner position, left | rightprogress.started() eventprogress.ended() event<ng-progress> component to be destroyed, fixes #27, #28, #33, #41, #81, #82 in #86NgProgressState interface for Progress stateNgProgressService has been renamed to NgProgressprogress.done() call progress.start() immediately will not work, closes #65, #66 in #67. Thanks to @xinshangshangxinHttpClient (Angular >= 4.3)z-index, closes #37NgProgressCustomBrowserXhr has renamed to NgProgressBrowserXhrngx-progressbar.[trickle] input is deprecated OnPush change detection strategy on the outer component to improve performance.Stable release
-New Feature: Thicker size using the input [thick]=true.
-Fixes Bug: Adds transition for the spinner and the progress bar tail
Initial release