- feat:
NgProgressRef
directive has(started)
and(completed)
outputs, instead of subjects. - feat:
NgProgressRef
directive has allNgProgress
component inputs excepts the irrelevant styling inputs. - feat: Add
fadeOutSpeed
input to set the fade out transition after the progress completes. - feat: Add
--ng-progress-spinner-speed
CSS variable to set the spinner speed. - enhance: Use
NgProgressRef
as hostDirective inNgProgress
component and forward its inputs and outputs. - enhance: avoid triggering the main effects twice in
ProgressRef
directive due to config update. - refactor: Use transform function for
min
andmax
inputs.
- Remove
setConfig()
function fromProgressRef
directive, you can now set the inputs directly. - Remove
start()
,complete()
,inc()
andset()
functions from the component reference.
- refactor: Use
untracked
in effects instead ofallowSignalWrites
andsetTimeout
.
- 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
fixed
option has been removed in favor ofrelative
option which does the opposite. - The
meteor
option has been removed in favor offlat
option which does the opposite. - The
spinner
default option has been changed tofalse
. - The service
NgProgress
has been removed. - The component
NgProgressComponent
has been renamed toNgProgress
. - The options interface
NgProgressConfig
has been renamed toNgProgressOptions
. - Remove
thick
option, use--ng-progress-thickness
and--ng-progress-spinner-thickness
CSS variables instead. - Remove
color
option, use--ng-progress-color
CSS variable instead. - Remove
ease
option, use--ng-progress-ease
CSS variable instead. - The option
delay
has been renamed tominDuration
in 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
zoom
totransform: scale
, closes #275 in c78dff6. - Added unit tests
Before:
silentApis
used to check the url usingurl.startsWith()
After:
silentApis
checks 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.getState
toNgProgressRef.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
ignoreProgressBar
to 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
NgProgressModule
in 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
NgProgressHttpModule
andNgProgressRouterModule
- 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
startEvents
andcompleteEvents
options, 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
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();
- If you are using
NgProgressRef
to 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 ofuseFactory
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()
.
- 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
trickleFunc
input. 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.transform
instead ofngStyle
to 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-placeholder
class. - 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-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 toNgProgress.complete()
.NgProgress.ended
has been renamed toNgProgress.completed()
.- Since
HttpModule
is deprecated, NgProgress no longer supports it. NgProgressHttpClientModule
has been renamed toNgProgressHttpModule
, so now theHttpClient
automagic 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
NgProgressState
interface for Progress state - Breaking Changes:
NgProgressService
has 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
NgProgressCustomBrowserXhr
has 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
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