Skip to content

Commit 8730fd5

Browse files
t-hot-ho
committed
Add NgxUiLoaderRouterModule for showing loader automatically when navigating between app routes
1 parent ecbbd9c commit 8730fd5

18 files changed

+238
-70
lines changed

‎README.md‎

Lines changed: 97 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ After importing the `NgxUiLoaderModule`, use `ngx-ui-loader` component in your r
6868

6969
```html
7070
<ngx-ui-loader></ngx-ui-loader>
71-
```
71+
```
7272

7373
Add `NgxUiLoaderService` service wherever you want to use the `ngx-ui-loader`:
7474

@@ -120,8 +120,8 @@ You can configure `ngx-ui-loader` in the template as below:
120120
Import the constant `SPINNER_TYPES` from `ngx-ui-loader` in your controller. Then in your template:
121121

122122
```html
123-
<ngx-ui-loader fgsSize="75" [fgsType]="SPINNER_TYPES.wanderingCubes" ></ngx-ui-loader>
124-
```
123+
<ngx-ui-loader fgsSize="75" [fgsType]="SPINNER_TYPES.wanderingCubes"></ngx-ui-loader>
124+
```
125125

126126
Or you can override the default configuration via `forRoot()` method.
127127

@@ -160,32 +160,100 @@ export class AppModule { }
160160

161161
## Input Options
162162

163-
| Attribute | Type | Required | Default | Description |
164-
| ------------- | ----------------- | ---------- | ---------- | ----------------------------------------------------------------------------------------- |
165-
| `bgsColor` | *string* | optional | `#00ACC1` | Background spinner color |
166-
| `bgsOpacity` | *number* | optional | `0.5` | Background spinner opacity |
167-
| `bgsPosition` | *string* | optional | `bottom-right` | Background spinner postion. All available positions can be accessed via `NGX_POSITIONS` |
168-
| `bgsSize` | *number* | optional | `60` | Background spinner size. |
169-
| `bgsType` | *string* | optional | `rectangle-bounce`| Background spinner type. All available types can be accessed via `SPINNER_TYPES` |
170-
| | | | | |
171-
| `fgsColor` | *string* | optional | `#00ACC1` | Foreground spinner color |
172-
| `fgsPosition` | *string* | optional | `center-center` | Foreground spinner position. All available positions can be accessed via `NGX_POSITIONS` |
173-
| `fgsSize` | *number* | optional | `60` | Foreground spinner size. |
174-
| `fgsType` | *string* | optional | `rectangle-bounce`| Foreground spinner type. All available types can be accessed via `SPINNER_TYPES` |
175-
| `gap` | *number* | optional | `24` | The gap between logo, foreground spinner and text when their positions are `center-center`|
176-
| `overlayColor` | *string* | optional | `rgba(40,40,40,.8)`| Overlay background color |
177-
| | | | | |
178-
| `logoPosition` | *string* | optional | `center-center` | Logo position. All available positions can be accessed via `NGX_POSITIONS` |
179-
| `logoSize` | *number* | optional | `120` | Logo size (px) |
180-
| `logoUrl` | *string* | optional | (*empty string*) | Logo url |
181-
| | | | | |
182-
| `pbColor` | *string* | optional | `#00ACC1` | Progress bar color |
183-
| `pbDirection` | *string* | optional | `ltr` | Progress bar direction. All directions type can be accessed via `PB_DIRECTIONS` |
184-
| `pbThickness` | *number* | optional | `5` | Progress bar thickness |
185-
| | | | | |
186-
| `text` | *string* | optional | (*empty string*) | Loading text |
187-
| `textColor` | *string* | optional | `#FFFFFF` | Loading text color |
188-
| `textPosition` | *string* | optional | `center-center` | Loading text position. All available positions can be accessed via `NGX_POSITIONS` ||
163+
| Attribute | Type | Required | Default | Description |
164+
| ---------------- | --------- | -------- | ------------------ | ----------------------------------------------------------------------------------------------- |
165+
| `bgsColor` | *string* | optional | `#00ACC1` | Background spinner color |
166+
| `bgsOpacity` | *number* | optional | `0.5` | Background spinner opacity |
167+
| `bgsPosition` | *string* | optional | `bottom-right` | Background spinner postion. All available positions can be accessed via `NGX_POSITIONS` |
168+
| `bgsSize` | *number* | optional | `60` | Background spinner size. |
169+
| `bgsType` | *string* | optional | `rectangle-bounce` | Background spinner type. All available types can be accessed via `SPINNER_TYPES` |
170+
| | | | | |
171+
| `fgsColor` | *string* | optional | `#00ACC1` | Foreground spinner color |
172+
| `fgsPosition` | *string* | optional | `center-center` | Foreground spinner position. All available positions can be accessed via `NGX_POSITIONS` |
173+
| `fgsSize` | *number* | optional | `60` | Foreground spinner size. |
174+
| `fgsType` | *string* | optional | `rectangle-bounce` | Foreground spinner type. All available types can be accessed via `SPINNER_TYPES` |
175+
| | | | | |
176+
| `logoPosition` | *string* | optional | `center-center` | Logo position. All available positions can be accessed via `NGX_POSITIONS` |
177+
| `logoSize` | *number* | optional | `120` | Logo size (px) |
178+
| `logoUrl` | *string* | optional | (*empty string*) | Logo url |
179+
| | | | | |
180+
| `pbColor` | *string* | optional | `#00ACC1` | Progress bar color |
181+
| `pbDirection` | *string* | optional | `ltr` | Progress bar direction. All directions type can be accessed via `PB_DIRECTIONS` |
182+
| `pbThickness` | *number* | optional | `5` | Progress bar thickness |
183+
| | | | | |
184+
| `text` | *string* | optional | (*empty string*) | Loading text |
185+
| `textColor` | *string* | optional | `#FFFFFF` | Loading text color |
186+
| `textPosition` | *string* | optional | `center-center` | Loading text position. All available positions can be accessed via `NGX_POSITIONS` |
187+
| | | | | |
188+
| `gap` | *number* | optional | `24` | The gap between logo, foreground spinner and text when their positions are `center-center` |
189+
| `overlayColor` | *string* | optional | `rgba(40,40,40,.8)`| Overlay background color |
190+
| `threshold` | *number* | optional | `500` | The time a loader must be showed at least before it can be stopped. It must be >= 1 millisecond. **NOTE: `threshold` is only configured via forRoot() method.**||
191+
192+
## Automatically show loader for router events
193+
194+
If you want the loader to start automatically for navigating between your app routes:
195+
196+
```typescript
197+
198+
import { BrowserModule } from '@angular/platform-browser';
199+
import { NgModule } from '@angular/core';
200+
201+
import { AppComponent } from './app.component';
202+
203+
import { NgxUiLoaderModule, NgxUiLoaderRouterModule } from 'ngx-ui-loader';
204+
205+
@NgModule({
206+
declarations: [
207+
AppComponent,
208+
],
209+
imports: [
210+
BrowserModule,
211+
NgxUiLoaderModule, // import NgxUiLoaderModule
212+
NgxUiLoaderRouterModule, // import NgxUiLoaderRouterModule. By default, it will show foreground loader.
213+
// If you need to show background spinner, do as follow:
214+
// NgxUiLoaderRouterModule.forRoot({ showForeground: false })
215+
],
216+
providers: [],
217+
bootstrap: [AppComponent]
218+
})
219+
export class AppModule { }
220+
221+
```
222+
223+
NOTE: And in you root app template, do not forget to include `ngx-ui-loader` component:
224+
225+
```html
226+
<ngx-ui-loader></ngx-ui-loader>
227+
```
228+
229+
## Changelog
230+
231+
### v.1.1.0
232+
**Features**
233+
* Show loader automatically when navigating between app routes
234+
* Add more spinner types
235+
236+
**Bugs Fixed**
237+
* Set z-index of background spinner to 99999
238+
239+
### v.1.0.2
240+
* Update example app and README.md
241+
242+
### v.1.0.1
243+
**Bugs fixed**
244+
* Position of background spinner is not fixed when scrolling
245+
* Unsafe Base64 logo url
246+
* Logo, foreground spinner and loading text are centered correctly and can set the gap between them via gap input
247+
248+
### v.1.0.0
249+
**Features**
250+
* Show foreground loader with progress bar
251+
* Show background loader with different id for different tasks
252+
* There are 12 spinner types available
253+
* Be able to add logo, loading text
254+
* Be able to change position of spinners, logo and loading text
255+
* Be able to change color and size of spinners and progress bar
256+
* Be able to change the direction of progress bar
189257

190258
## Credits
191259

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-ui-loader-app",
3-
"version": "1.0.2",
3+
"version": "1.1.0",
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve",

‎projects/ngx-ui-loader/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "ngx-ui-loader",
33
"description": "An all-in-one and fully customizable loader/spinner for Angular 5+ (5+ and 6+ are tested) applications. It supports foreground, background spinner/loader and indicative progress bar.",
4-
"version": "1.0.2",
4+
"version": "1.1.0",
55
"repository": {
66
"type": "git",
77
"url": "https://github.com/t-ho/ngx-ui-loader.git"

‎projects/ngx-ui-loader/src/lib/ngx-ui-loader-config.token.ts‎ renamed to ‎projects/ngx-ui-loader/src/lib/core/ngx-ui-loader-config.token.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
import { InjectionToken } from '@angular/core';
22
import { NgxUiLoaderConfig } from './ngx-ui-loader-config';
33

4+
/**
5+
* Injection token for ngx-ui-loader configuration
6+
*/
47
export const NGX_UI_LOADER_CONFIG_TOKEN = new InjectionToken<NgxUiLoaderConfig>('ngxUiLoaderDefault.config');

‎projects/ngx-ui-loader/src/lib/ngx-ui-loader-config.ts‎ renamed to ‎projects/ngx-ui-loader/src/lib/core/ngx-ui-loader-config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,5 @@ export interface NgxUiLoaderConfig {
2222
text?: string;
2323
textColor?: string;
2424
textPosition?: string;
25+
threshold?: number;
2526
}

‎projects/ngx-ui-loader/src/lib/ngx-ui-loader-helper.service.ts‎ renamed to ‎projects/ngx-ui-loader/src/lib/core/ngx-ui-loader-helper.service.ts‎

Lines changed: 51 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,9 @@ export class NgxUiLoaderHelperService {
5858
if (this.config.textPosition) {
5959
this.config.textPosition = this.validatePosition('textPosition', this.config.textPosition, DEFAULT_CONFIG.textPosition);
6060
}
61+
if (this.config.threshold && this.config.threshold <= 0) {
62+
this.config.threshold = DEFAULT_CONFIG.threshold;
63+
}
6164
this.defaultConfig = { ...this.defaultConfig, ...this.config };
6265
}
6366

@@ -129,10 +132,7 @@ export class NgxUiLoaderHelperService {
129132
const foregroundRunning = this.hasForeground();
130133

131134
if (foreground) {
132-
if (this.waitingForeground[id]) {
133-
return { id: id, isForeground: foreground };
134-
}
135-
this.waitingForeground[id] = true;
135+
this.waitingForeground[id] = Date.now();
136136
if (!foregroundRunning) {
137137
const backgroundRunning = this.hasBackground();
138138
if (backgroundRunning) {
@@ -142,10 +142,7 @@ export class NgxUiLoaderHelperService {
142142
this._showForeground.next(true);
143143
}
144144
} else { // foreground == false
145-
if (this.waitingBackground[id]) {
146-
return { id: id, isForeground: foreground };
147-
}
148-
this.waitingBackground[id] = true;
145+
this.waitingBackground[id] = Date.now();
149146
if (!foregroundRunning) {
150147
this._showBackground.next(true);
151148
}
@@ -154,45 +151,68 @@ export class NgxUiLoaderHelperService {
154151
}
155152

156153
/**
157-
* Stop a loading with specific id
154+
* Stop a foreground loading with specific id
158155
* @param id the optional id to stop. If not provided, 'default' is used.
159-
* @param foreground If true, stop foreground loading. Otherwise, stop background loading.
156+
* @return
160157
*/
161-
stop(id?: string, foreground?: boolean): Object {
158+
stop(id?: string): Object {
159+
const now = Date.now();
162160
id = id ? id : DEFAULT_ID;
163-
foreground = typeof foreground === 'boolean' ? foreground : true;
164161

165-
if (foreground) {
166-
if (this.waitingForeground[id]) {
167-
delete this.waitingForeground[id];
168-
} else {
169-
return { id: id, isForeground: foreground, isSuccess: false, stopAll: false };
162+
if (this.waitingForeground[id]) {
163+
if (this.waitingForeground[id] + this.defaultConfig.threshold > now) {
164+
setTimeout(() => {
165+
this.stop(id);
166+
}, this.waitingForeground[id] + this.defaultConfig.threshold - Date.now());
167+
return { id: id, isForeground: true, isSuccess: false, stopAll: false };
170168
}
169+
delete this.waitingForeground[id];
171170
} else {
172-
if (this.waitingBackground[id]) {
173-
delete this.waitingBackground[id];
174-
} else {
175-
return { id: id, isForeground: foreground, isSuccess: false, stopAll: false };
176-
}
171+
return { id: id, isForeground: true, isSuccess: false, stopAll: false };
177172
}
178173

179174
if (!this.isActive()) {
180-
if (foreground) {
181-
this.foregroundCloseout();
182-
this._showForeground.next(false);
183-
} else {
184-
this.backgroundCloseout();
185-
this._showBackground.next(false);
186-
}
187-
return { id: id, isForeground: foreground, isSuccess: true, stopAll: true };
175+
this.foregroundCloseout();
176+
this._showForeground.next(false);
177+
return { id: id, isForeground: true, isSuccess: true, stopAll: true };
188178
}
189179

190180
if (!this.hasForeground()) {
191181
this.foregroundCloseout();
192182
this._showForeground.next(false);
193183
this._showBackground.next(true);
194184
}
195-
return { id: id, isForeground: foreground, isSuccess: true, stopAll: false };
185+
return { id: id, isForeground: true, isSuccess: true, stopAll: false };
186+
}
187+
188+
/**
189+
* Stop a background loading with specific id
190+
* @param id the optional id to stop. If not provided, 'default' is used.
191+
* @return
192+
*/
193+
stopBackground(id?: string): Object {
194+
const now = Date.now();
195+
id = id ? id : DEFAULT_ID;
196+
197+
if (this.waitingBackground[id]) {
198+
if (this.waitingBackground[id] + this.defaultConfig.threshold > now) {
199+
setTimeout(() => {
200+
this.stopBackground(id);
201+
}, this.waitingBackground[id] + this.defaultConfig.threshold - Date.now());
202+
return { id: id, isForeground: false, isSuccess: false, stopAll: false };
203+
}
204+
delete this.waitingBackground[id];
205+
} else {
206+
return { id: id, isForeground: false, isSuccess: false, stopAll: false };
207+
}
208+
209+
if (!this.isActive()) {
210+
this.backgroundCloseout();
211+
this._showBackground.next(false);
212+
return { id: id, isForeground: false, isSuccess: true, stopAll: true };
213+
}
214+
215+
return { id: id, isForeground: false, isSuccess: true, stopAll: false };
196216
}
197217

198218
/**

‎projects/ngx-ui-loader/src/lib/ngx-ui-loader.component.html‎ renamed to ‎projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.component.html‎

File renamed without changes.

‎projects/ngx-ui-loader/src/lib/ngx-ui-loader.component.scss‎ renamed to ‎projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.component.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,7 @@ $spinnerSize: 60px;
234234

235235
.ngx-background-spinner {
236236
position: fixed;
237+
z-index: 99999 !important;
237238
width: $spinnerSize;
238239
height: $spinnerSize;
239240
margin: 0;

‎projects/ngx-ui-loader/src/lib/ngx-ui-loader.component.spec.ts‎ renamed to ‎projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.component.spec.ts‎

File renamed without changes.

‎projects/ngx-ui-loader/src/lib/ngx-ui-loader.component.ts‎ renamed to ‎projects/ngx-ui-loader/src/lib/core/ngx-ui-loader.component.ts‎

File renamed without changes.

0 commit comments

Comments
 (0)