- Upgrade to Angular 19 (still compatible with v17.3.0 and above).
- fix:
ngProgressHttpgives an error with http requests inside effects, closes #386
- feat:
NgProgressRefdirective has(started)and(completed)outputs, instead of subjects. - feat:
NgProgressRefdirective has allNgProgresscomponent inputs excepts the irrelevant styling inputs. - feat: Add
fadeOutSpeedinput to set the fade out transition after the progress completes. - feat: Add
--ng-progress-spinner-speedCSS variable to set the spinner speed. - enhance: Use
NgProgressRefas hostDirective inNgProgresscomponent and forward its inputs and outputs. - enhance: avoid triggering the main effects twice in
ProgressRefdirective due to config update. - refactor: Use transform function for
minandmaxinputs.
- Remove
setConfig()function fromProgressRefdirective, you can now set the inputs directly. - Remove
start(),complete(),inc()andset()functions from the component reference.
- refactor: Use
untrackedin effects instead ofallowSignalWritesandsetTimeout.
- Upgrade to Angular 18 (still compatible v17.3.0 and above).
- feat: Introduce CSS variables for more flexible customization, see styling.
- feat: Provide
provideNgProgressOptions()to override global options. - feat: Provide
provideNgProgressHttp()to override http related options. - feat: Provide
provideNgProgressRouter()to override router related options. - feat: Ability to use boolean inputs as attributes.
- refactor: Utilize signals API.
- The
fixedoption has been removed in favor ofrelativeoption which does the opposite. - The
meteoroption has been removed in favor offlatoption which does the opposite. - The
spinnerdefault option has been changed tofalse. - The service
NgProgresshas been removed. - The component
NgProgressComponenthas been renamed toNgProgress. - The options interface
NgProgressConfighas been renamed toNgProgressOptions. - Remove
thickoption, use--ng-progress-thicknessand--ng-progress-spinner-thicknessCSS variables instead. - Remove
coloroption, use--ng-progress-colorCSS variable instead. - Remove
easeoption, use--ng-progress-easeCSS variable instead. - The option
delayhas been renamed tominDurationin progressbar router options.
- feat: Migrate to Angular standalone components in 1a6f780.
- refactor: Update rxjs imports in 6f426b1.
- Update to Angular 16 in 5f05486.
- Refactor(core): Update progressbar styles directly to avoid triggering change detection frequently in 42f4bf5.
- Update to Angular 15 in a4f365a.
- Update to Angular 14 in d7e70a9.
- feat: Add matcher feature to http module, closes #254 in a6ab70b and ce3c0d6.
- fix: Remove case-sensitive from
silentApis, closes #283 in 32da22c. - refactor: Change
zoomtotransform: scale, closes #275 in c78dff6. - Added unit tests
Before:
silentApisused to check the url usingurl.startsWith()
After:
silentApischecks the url usingurl.includes()
When silentApis is used along with matcher regex, it will check if the URL matches both cases, learn more at wiki page.
- Upgrade to Angular 13, closes #319 in fdf89a2.
- Rename dir attribute to direction, closes #322 in 45634a2.
- Upgrade to Angular 12
- feat: Use the strict mode, in 25f0976.
- fix typo for config stream in
NgProgressRef
- Rename
NgProgressRef.getStatetoNgProgressRef.snapshot
- Upgrade to Angular 11
- fix: get a new progressRef after the current one has been destroyed, in 69af8fe.
- feat: Upgrade library to Angular 9 in 8b1929a.
- fix: Remove warning when the package is installed in Angular 9 in bdfd1b7.
- fix: Cancel any finalizing delays if the progress started again too soon before it was fully completed, closes #253 in e68c7af.
Before 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';- feat(http): Ignore HTTP request by appending
ignoreProgressBarto request's headers, closes #234 in a625d01. - enhance(core): Increase spinner speed, in 0381cd3.
- refactor(core, http, router): Deprecate
forRoot(config?)usage, config can be provided usingwithConfig(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.
- Change
NgProgressModule.forRoot()toNgProgressModule - If you use custom config
NgProgressModule.forRoot(config), then change it toNgProgressModule.withConfig(config)
The same applies on
NgProgressHttpModuleandNgProgressRouterModule
- Update packages peerDependecies to remove npm warnings in Angular 7
- Update project to Angular 7
- feat(core): Add
[fixed]option, to disable the default progress bar fixed position, closes #212 in fff21f3. - feat(router): Add
startEventsandcompleteEventsoptions, closes #211 in 0f7effe. - refactor(core): Refactor progressbar destroyer function.
- refactor(core): change progressbar state from
NgProgressRef.state$toNgProgressRef.state. - refactor(core): Use
Map<string, NgProgressRef>for instances instead of just an object. - refactor(core): Remove helper functions exposed in
NgProgress.
- The following functions has been remove from
NgProgressservice: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();- If you are using
NgProgressRefto integrate it with other progress bar components
Before:
<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>- fix(router): Progressbar is not completing when navigation ends, closes #202 in 6d8b644.
- fix(router): Fix router config.delay is undefined error, in 9dae94b.
- feat(http): Add optional config to set progressRef id and silent APIs, closes #83 in 3c1d72c (Thanks to @bboyz269).
- feat(router): Add optional config to set progressRef id and a delay to complete the progress bar, closes #181 in d274745.
- refactor(NgProgress): Use,
{providedIn: 'root'}instead ofuseFactoryfunction 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().
- fix(build): fix
warning " > @ngx-progressbar/core@5.0.0" has incorrect peer dependency "@angular/core@5.0.0".
- fixbug(build): fix build aot failure with angular 6, closes #143, #167, #166, #165, #164, #163, #162, #161, #160
- fix(NgProgressService): NgProgress.completed: return completed observable, #157
- feat(core): Add
trickleFuncinput. This allows users to change the trickling amount based on progress state, closes #146 in #148.
- Use rxjs deep imports to avoid the whole lib to be bundled, #132.
- feat(Support IE11): Remove css variable, closes #123.
- refactor(NgProgressComponent): prefix component classes with
ng-to avoid the side effects with other libraries, closes #125.
- fix(NgProgressComponent): Initialize progress bar without inputs, closes #118.
- refactor(NgProgressComponent): Use
style.transforminstead ofngStyleto animate the progress.
- Move NgProgress logic to NgProgressRef.
- Refactor(NgProgress): became a central service to access progress bars instances (NgProgressRef).
- Refactor(NgProgressRef): shorten code, reduce complexity.
- Refactor(NgProgressBarComponent): Initialize inputs from the global config.
- Improve performance: Use a pure css solution for the progress bar.
- Refactor(NgProgressModule): Remove the service factory.
- Supports multiple progress bars, closes #113.
<ng-progress></ng-progress>
<ng-progress id="instance1"></ng-progress>
<ng-progress id="instance2"></ng-progress>- Ability to set global config for all progress bars using
forRoot(config). - Ability to set background-color of the progress bar holder using
.bar-placeholderclass. - Adds
(started)and(complete)output to the component. - Adds
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-clientpackage is deprecated in version 4.x, use@ngx-progressbar/httpinstead.[toggle]input has been removed from the component.NgProgress.done()has been renamed toNgProgress.complete().NgProgress.endedhas been renamed toNgProgress.completed().- Since
HttpModuleis deprecated, NgProgress no longer supports it. NgProgressHttpClientModulehas been renamed toNgProgressHttpModule, so now theHttpClientautomagic feature is published on@ngx-progressbar/http
- Refactor(ProgressBar)
- track multiple concurrent requests in #105
- Fixed the problem with AOT build in v3.0.0
-
Main package is now
@ngx-progressbar/core -
Auto-magic features will be used by importing its module:
- For Http requests, use
@ngx-progressbar/http - For HttpClient requests, use
@ngx-progressbar/http-client - For Router events, use
@ngx-progressbar/router
- For Http requests, use
-
remove
[positionUsing]option to use translate3d only -
rename
[showSpinner]option to[spinner]
- Improve rendering performance
- Add
[spinnerPosition]options to set the spinner position,left|right - Add
progress.started()event - Add
progress.ended()event - Add option to disable progressbar tail (meteor)
- Fix progressbar tail (meteor) in right to left direction
- Allow
<ng-progress>component to be destroyed, fixes #27, #28, #33, #41, #81, #82 in #86 - Add
NgProgressStateinterface for Progress state - Breaking Changes:
NgProgressServicehas been renamed toNgProgress
- fix: remove unused code in #68
- fix: after
progress.done()callprogress.start()immediately will not work, closes #65, #66 in #67. Thanks to @xinshangshangxin
- Remove NgProgressBrowserXhr from NgProgressModule providers
- Remove Http peerDepenedcy, closes #61
- feat(NgProgressHttpInterceptor): Adds automagic feature to
HttpClient(Angular >= 4.3)
- Refactor(ProgressComponent) Increase
z-index, closes #37 - General refactor for all files, improve linting
- Use inline styles and templates
NgProgressCustomBrowserXhrhas renamed toNgProgressBrowserXhr
- Broken release
- Rename npm package to
ngx-progressbar. - Update peerDependecies.
- (fix) Progressbar transition animation (which was introduced in v1.2.0), closes #16
- (refactor) ProgressBarComponent
- (feat) Support systemjs
- (feat) XHR provider for multiple http requests (BETA), closes #15
- (fix) Progressbar stuck after one time, closes #10
- (fix) AOT failing, cloese #8
- (feat) adds maximum input, closes #9
- (fix) default input values
- margin positioning
- fixes: Service.Done() doesn't complete the progress if it wasn't trickling
- (fix) No Animation on IE, Edge by using css animation-js polyfills
- Use rxjs operators to imrpove code quality
- Remove extra unnecessory subjects which been used in previous versions
- Remove unnecessory style
- Use single subject for update progress state
- Move logic to the service and make components as dump as possible
- Improve animation
- Support AOT
- Coloring animation is deprecated
[trickle]input is deprecated
- Improvement: Uses
OnPushchange 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