Skip to content

Commit 00d658a

Browse files
t-hot-ho
committed
Bugs fixed and show all available spinners in demo app
1 parent 8730fd5 commit 00d658a

16 files changed

+475
-297
lines changed

‎README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ An all-in-one and fully customizable loader/spinner for Angular 5+ (5+ and 6+ ar
99

1010
[![ngx-ui-loader-demo](https://j.gifs.com/gL9k9r.gif)](https://ngx-ui-loader-demo.stackblitz.io)
1111

12+
Available spinners:
13+
14+
[![ngx-ui-loader-spinners](https://j.gifs.com/L8VWkp.gif)](https://ngx-ui-loader-demo.stackblitz.io/spinners)
15+
1216
### Features
1317

1418
* Show foreground loader with progress bar
@@ -228,10 +232,15 @@ NOTE: And in you root app template, do not forget to include `ngx-ui-loader` com
228232

229233
## Changelog
230234

235+
### v.1.1.1
236+
* Bugs fixed
237+
238+
231239
### v.1.1.0
232240
**Features**
233241
* Show loader automatically when navigating between app routes
234242
* Add more spinner types
243+
* Be able to set a threshold
235244

236245
**Bugs Fixed**
237246
* Set z-index of background spinner to 99999

‎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.1.0",
3+
"version": "1.1.1",
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.1.0",
4+
"version": "1.1.1",
55
"repository": {
66
"type": "git",
77
"url": "https://github.com/t-ho/ngx-ui-loader.git"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -335,7 +335,7 @@ $spinnerSize: 60px;
335335
.sk-ball-scale-multiple {
336336
display: block;
337337
font-size: 0;
338-
color: $spinnerColor;
338+
color: currentColor;
339339
}
340340

341341
.sk-ball-scale-multiple > div {

‎src/app/app.component.html‎

Lines changed: 21 additions & 196 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
<ngx-ui-loader
2-
[fgsColor]="config.fgsColor"
3-
[fgsPosition]="config.fgsPosition"
4-
[fgsSize]="config.fgsSize"
5-
[fgsType]="config.fgsType"
6-
[bgsColor]="config.bgsColor"
7-
[bgsOpacity]="config.bgsOpacity"
8-
[bgsPosition]="config.bgsPosition"
9-
[bgsSize]="config.bgsSize"
10-
[bgsType]="config.bgsType"
11-
[gap]="config.gap"
12-
[logoPosition]="config.logoPosition"
13-
[logoSize]="config.logoSize"
14-
[logoUrl]="config.logoUrl"
15-
[overlayColor]="config.overlayColor"
16-
[pbColor]="config.pbColor"
17-
[pbDirection]="config.pbDirection"
18-
[pbThickness]="config.pbThickness"
19-
[text]="config.text"
20-
[textColor]="config.textColor"
21-
[textPosition]="config.textPosition"></ngx-ui-loader>
2+
[fgsColor]="demoService.config.fgsColor"
3+
[fgsPosition]="demoService.config.fgsPosition"
4+
[fgsSize]="demoService.config.fgsSize"
5+
[fgsType]="demoService.config.fgsType"
6+
[bgsColor]="demoService.config.bgsColor"
7+
[bgsOpacity]="demoService.config.bgsOpacity"
8+
[bgsPosition]="demoService.config.bgsPosition"
9+
[bgsSize]="demoService.config.bgsSize"
10+
[bgsType]="demoService.config.bgsType"
11+
[gap]="demoService.config.gap"
12+
[logoPosition]="demoService.config.logoPosition"
13+
[logoSize]="demoService.config.logoSize"
14+
[logoUrl]="demoService.config.logoUrl"
15+
[overlayColor]="demoService.config.overlayColor"
16+
[pbColor]="demoService.config.pbColor"
17+
[pbDirection]="demoService.config.pbDirection"
18+
[pbThickness]="demoService.config.pbThickness"
19+
[text]="demoService.config.text"
20+
[textColor]="demoService.config.textColor"
21+
[textPosition]="demoService.config.textPosition"></ngx-ui-loader>
2222
<mat-toolbar color="primary">
2323
<span>
2424
<a mat-button href="https://www.npmjs.com/package/ngx-ui-loader" target="_blank">
@@ -46,179 +46,4 @@ <h2>NGX-UI-LOADER</h2>
4646
</a>
4747
</div>
4848
<h3>A fully customizable loader/spinner for angular 5+ and 6+</h3>
49-
50-
<div fxLayout="row" fxLayoutAlign="center" style="margin-top: 12px">
51-
<div fxFlex="100" fxFlex.lg="90" fxFlex.gt-lg="70" fxLayout="row wrap" fxLayoutAlign="center">
52-
53-
<div fxFlex="100" fxFlex.gt-md="36" fxLayout="column" fxLayout.sm="row" fxLayout.md="row" class="p-12">
54-
<mat-list role="list" fxFlex.sm="50" fxFlex.md="50" class="mat-elevation-z4">
55-
<mat-list-item role="listitem">
56-
<mat-slide-toggle (change)="fgSlideChange($event.checked)" [(checked)]="waitingForeground['default']">
57-
{{waitingForeground['default'] ? 'stop' : 'start'}}() - automatically stop after 3s
58-
</mat-slide-toggle>
59-
</mat-list-item>
60-
<mat-list-item role="listitem">
61-
<mat-slide-toggle (change)="fgSlideChange1($event.checked)" [(checked)]="waitingForeground['fg-1']">
62-
{{waitingForeground['fg-1'] ? 'stop' : 'start'}}('fg-1') - automatically stop after 8s
63-
</mat-slide-toggle>
64-
</mat-list-item>
65-
<mat-list-item role="listitem">
66-
<mat-slide-toggle (change)="bgSlideChange($event.checked)">
67-
{{waitingBackground['default'] ? 'stop' : 'start'}}Background()
68-
</mat-slide-toggle>
69-
</mat-list-item>
70-
<mat-list-item role="listitem">
71-
<mat-slide-toggle (change)="bgSlideChange2($event.checked)">
72-
{{waitingBackground['bg-2'] ? 'stop' : 'start'}}Background('bg-2')
73-
</mat-slide-toggle>
74-
</mat-list-item>
75-
<mat-list-item role="listitem">
76-
<div fxLayout="column">
77-
<span class="place-holder">waitingForeground = </span>
78-
<code>{{waitingForeground | json}}</code>
79-
</div>
80-
</mat-list-item>
81-
<mat-list-item role="listitem">
82-
<div fxLayout="column">
83-
<span class="place-holder">waitingBackground = </span>
84-
<code>{{waitingBackground | json}}</code>
85-
</div>
86-
</mat-list-item>
87-
</mat-list>
88-
<div fxLayout="column" fxFlex.sm="50" fxFlex.md="50" class="config-info">
89-
<span class="place-holder">ngx-ui-loader-configuration = </span>
90-
<pre><code>{{config | json}}</code></pre>
91-
</div>
92-
</div>
93-
<!-- Foreground {{{-->
94-
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="32" fxLayout="column" class="p-12">
95-
<mat-form-field>
96-
<input [(colorPicker)]="config.fgsColor" matInput placeholder="Foreground Spinner Color (fgsColor)" [(ngModel)]="config.fgsColor">
97-
<mat-icon matSuffix [style.color]="config.fgsColor" fontIcon="mdi-palette" fontSet="mdi"></mat-icon>
98-
</mat-form-field>
99-
100-
<mat-form-field>
101-
<mat-select placeholder="Foreground Spinner Type (fgsType)" [(value)]="config.fgsType">
102-
<mat-option *ngFor="let type of spinnerTypes" [value]="type">
103-
{{ type }}
104-
</mat-option>
105-
</mat-select>
106-
</mat-form-field>
107-
108-
<mat-form-field>
109-
<mat-select placeholder="Foreground Spinner Position (fgsPosition)" [(value)]="config.fgsPosition">
110-
<mat-option *ngFor="let position of positions" [value]="position">
111-
{{ position }}
112-
</mat-option>
113-
</mat-select>
114-
</mat-form-field>
115-
116-
<div>
117-
<span class="place-holder">Foreground Spinner Size (fgsSize)</span>
118-
<mat-slider max="150" min="20" step="10" [thumbLabel]="true" [(ngModel)]="config.fgsSize"></mat-slider>
119-
</div>
120-
121-
<div>
122-
<span class="place-holder">Progress Bar Thickness (pbThickness)</span>
123-
<mat-slider fxFlex="100" max="10" min="1" step="1" [thumbLabel]="true" [(ngModel)]="config.pbThickness"></mat-slider>
124-
</div>
125-
126-
<mat-form-field>
127-
<mat-select placeholder="Progress Bar Direction (pbDirection)" [(value)]="config.pbDirection">
128-
<mat-option *ngFor="let direction of directions" [value]="direction">
129-
{{ direction }}
130-
</mat-option>
131-
</mat-select>
132-
</mat-form-field>
133-
134-
<mat-form-field>
135-
<input [(colorPicker)]="config.overlayColor" cpOutputFormat="rgba" matInput placeholder="Overlay Color (overlayColor)" [(ngModel)]="config.overlayColor">
136-
<mat-icon matSuffix [style.color]="config.overlayColor" fontIcon="mdi-palette" fontSet="mdi"></mat-icon>
137-
</mat-form-field>
138-
139-
<mat-form-field>
140-
<input matInput placeholder="Loading Text (text)" [(ngModel)]="config.text" autocomplete="off">
141-
</mat-form-field>
142-
143-
<mat-form-field>
144-
<mat-select placeholder="Loading Text Position (textPosition)" [(value)]="config.textPosition" [disabled]="!config.text">
145-
<mat-option *ngFor="let position of positions" [value]="position">
146-
{{ position }}
147-
</mat-option>
148-
</mat-select>
149-
</mat-form-field>
150-
151-
<mat-form-field>
152-
<input [(colorPicker)]="config.textColor" matInput placeholder="Loading Text Color (textColor)" [(ngModel)]="config.textColor" [disabled]="!config.text">
153-
<mat-icon matSuffix [style.color]="config.textColor" fontIcon="mdi-palette" fontSet="mdi"></mat-icon>
154-
</mat-form-field>
155-
156-
</div>
157-
<!-- Foreground }}}-->
158-
159-
<!-- Background {{{-->
160-
<div fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="32" fxLayout="column" class="p-12">
161-
<mat-form-field>
162-
<input [(colorPicker)]="config.bgsColor" matInput placeholder="Background Spinner Color (bgsColor)" [(ngModel)]="config.bgsColor">
163-
<mat-icon matSuffix [style.color]="config.bgsColor" fontIcon="mdi-palette" fontSet="mdi"></mat-icon>
164-
</mat-form-field>
165-
166-
<mat-form-field>
167-
<mat-select placeholder="Background Spinner Type (bgsType)" [(value)]="config.bgsType">
168-
<mat-option *ngFor="let type of spinnerTypes" [value]="type">
169-
{{ type }}
170-
</mat-option>
171-
</mat-select>
172-
</mat-form-field>
173-
174-
<mat-form-field>
175-
<mat-select placeholder="Background Spinner Position (bgsPosition)" [(value)]="config.bgsPosition">
176-
<mat-option *ngFor="let position of positions" [value]="position">
177-
{{ position }}
178-
</mat-option>
179-
</mat-select>
180-
</mat-form-field>
181-
182-
<div>
183-
<span class="place-holder">Background Spinner Size (bgsSize)</span>
184-
<mat-slider max="150" min="20" step="10" [thumbLabel]="true" [(ngModel)]="config.bgsSize"></mat-slider>
185-
</div>
186-
187-
<div>
188-
<span class="place-holder">Background Spinner Opacity (bgsOpacity)</span>
189-
<mat-slider max="1" min="0.1" step="0.1" [thumbLabel]="true" [(ngModel)]="config.bgsOpacity"></mat-slider>
190-
</div>
191-
192-
<mat-form-field>
193-
<input [(colorPicker)]="config.pbColor" matInput placeholder="Progress Bar Color (pbColor)" [(ngModel)]="config.pbColor">
194-
<mat-icon matSuffix [style.color]="config.pbColor" fontIcon="mdi-palette" fontSet="mdi"></mat-icon>
195-
</mat-form-field>
196-
197-
<div>
198-
<span class="place-holder">Gap between logo, spinner and text (gap)</span>
199-
<mat-slider fxFlex="100" max="150" min="10" step="1" [thumbLabel]="true" [(ngModel)]="config.gap"></mat-slider>
200-
</div>
201-
202-
<div style="margin-top: 21px; margin-bottom: 20px">
203-
<mat-checkbox (change)="addLogo($event.checked)" [checked]="config.logoUrl">Add logo</mat-checkbox>
204-
</div>
205-
206-
<mat-form-field>
207-
<mat-select placeholder="Logo Position (logoPosition)" [(value)]="config.logoPosition" [disabled]="!config.logoUrl">
208-
<mat-option *ngFor="let position of positions" [value]="position">
209-
{{ position }}
210-
</mat-option>
211-
</mat-select>
212-
</mat-form-field>
213-
214-
<div>
215-
<span class="place-holder">Logo size (logoSize)</span>
216-
<mat-slider fxFlex="100" max="200" min="40" step="10" [thumbLabel]="true" [(ngModel)]="config.logoSize" [disabled]="!config.logoUrl"></mat-slider>
217-
</div>
218-
</div>
219-
<div fxFlex="100" fxLayout="row" fxLayoutAlign="center">
220-
<button mat-raised-button color="primary" (click)="reset()">Reset Configuration</button>
221-
</div>
222-
<!-- Background }}}-->
223-
</div>
224-
</div>
49+
<router-outlet></router-outlet>

‎src/app/app.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,7 @@ mat-slider {
4646
.mat-elevation-z4 {
4747
background-color: rgba(63, 81, 181, 0.3);
4848
}
49+
50+
.mat-list-item code {
51+
font-size: 75%;
52+
}

‎src/app/app.component.ts‎

Lines changed: 4 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,14 @@
1-
import { Component, OnInit, OnDestroy } from '@angular/core';
2-
import { NgxUiLoaderService, NgxUiLoaderConfig, SPINNER_TYPES, NGX_POSITIONS, PB_DIRECTIONS } from 'ngx-ui-loader';
3-
import { Subscription } from 'rxjs';
1+
import { Component } from '@angular/core';
42

5-
const LOGO_URL = 'assets/angular.png';
3+
import { NgxUiLoaderDemoService } from './ngx-ui-loader-demo.service';
64

75
@Component({
86
selector: 'app-root',
97
templateUrl: './app.component.html',
108
styleUrls: ['./app.component.scss']
119
})
12-
export class AppComponent implements OnDestroy, OnInit {
13-
spinnerTypes: string[];
14-
positions: string[];
15-
directions: string[];
10+
export class AppComponent {
1611

17-
config: NgxUiLoaderConfig;
18-
19-
waitingForeground = {};
20-
waitingBackground = {};
21-
22-
onStartWatcher: Subscription;
23-
onStopWatcher: Subscription;
24-
25-
constructor(private ngxUiLoaderService: NgxUiLoaderService) {
26-
}
27-
28-
ngOnInit() {
29-
this.spinnerTypes = Object.keys(SPINNER_TYPES).map(key => SPINNER_TYPES[key]);
30-
this.positions = Object.keys(NGX_POSITIONS).map(key => NGX_POSITIONS[key]);
31-
this.directions = Object.keys(PB_DIRECTIONS).map(key => PB_DIRECTIONS[key]);
32-
33-
this.config = this.ngxUiLoaderService.getDefaultConfig();
34-
35-
this.onStopWatcher = this.ngxUiLoaderService.onStop
36-
.subscribe(data => {
37-
const status = this.ngxUiLoaderService.getStatus();
38-
this.waitingForeground = status.waitingForeground;
39-
this.waitingBackground = status.waitingBackground;
40-
});
41-
42-
this.onStartWatcher = this.ngxUiLoaderService.onStart
43-
.subscribe(data => {
44-
const status = this.ngxUiLoaderService.getStatus();
45-
this.waitingForeground = status.waitingForeground;
46-
this.waitingBackground = status.waitingBackground;
47-
});
48-
}
49-
50-
addLogo(checked) {
51-
if (checked) {
52-
this.config.logoUrl = LOGO_URL;
53-
} else {
54-
this.config.logoUrl = '';
55-
}
56-
}
57-
58-
fgSlideChange(checked) {
59-
if (checked) {
60-
this.ngxUiLoaderService.start();
61-
setTimeout(() => {
62-
this.ngxUiLoaderService.stop();
63-
}, 3000);
64-
}
65-
}
66-
67-
fgSlideChange1(checked) {
68-
if (checked) {
69-
this.ngxUiLoaderService.start('fg-1');
70-
setTimeout(() => {
71-
this.ngxUiLoaderService.stop('fg-1');
72-
}, 8000);
73-
}
74-
}
75-
76-
bgSlideChange(checked) {
77-
if (checked) {
78-
this.ngxUiLoaderService.startBackground();
79-
} else {
80-
this.ngxUiLoaderService.stopBackground();
81-
}
82-
}
83-
84-
bgSlideChange2(checked) {
85-
if (checked) {
86-
this.ngxUiLoaderService.startBackground('bg-2');
87-
} else {
88-
this.ngxUiLoaderService.stopBackground('bg-2');
89-
}
90-
}
91-
92-
reset() {
93-
this.config = this.ngxUiLoaderService.getDefaultConfig();
94-
}
95-
96-
ngOnDestroy() {
97-
if (this.onStartWatcher) {
98-
this.onStartWatcher.unsubscribe();
99-
}
100-
if (this.onStopWatcher) {
101-
this.onStopWatcher.unsubscribe();
102-
}
12+
constructor(public demoService: NgxUiLoaderDemoService) {
10313
}
10414
}

0 commit comments

Comments
 (0)