Correctly center logo, foreground spinner and text - can set the gap

Author: t-ho

README.md

@@ -169,6 +169,7 @@ export class AppModule { }
 | `fgsPosition`    | *string*  | optional | `center-center`   | Foreground spinner position. All available positions can be accessed via `NGX_POSITIONS`  |
 | `fgsSize`        | *number*  | optional | `60`              | Foreground spinner size.                                                                  |
 | `fgsType`        | *string*  | optional | `rectangle-bounce`| Foreground spinner type. All available types can be accessed via `SPINNER_TYPES`          |
+| `gap`            | *number*  | optional | `24`              | The gap between logo, foreground spinner and text when their position are `center-center` |
 | `logoPosition`   | *string*  | optional | `center-center`   | Logo position. All available positions can be accessed via `NGX_POSITIONS`                |
 | `logoSize`       | *number*  | optional | `120`             | Logo size (px)                                                                            |
 | `logoUrl`        | *string*  | optional | (*empty string*)  | Logo url                                                                                  |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-ui-loader-app",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

projects/ngx-ui-loader/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ngx-ui-loader",
   "description": "A fully customizable loader/spinner and progress bar for Angular 4, 5(tested) and 6+(tested) applications - AoT compatible.",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/t-ho/ngx-ui-loader.git"

projects/ngx-ui-loader/src/lib/ngx-ui-loader-config.ts

@@ -11,6 +11,7 @@ export interface NgxUiLoaderConfig {
   fgsPosition?: string;
   fgsSize?: number;
   fgsType?: string;
+  gap?: number;
   logoPosition?: string;
   logoSize?: number;
   logoUrl?: string;

projects/ngx-ui-loader/src/lib/ngx-ui-loader.component.html

@@ -1,28 +1,46 @@
+<!-- Progress bar {{{ -->
 <div [ngClass]="'ngx-ui-loader-bar-' + pbDirection"
   [style.height.px]="pbThickness"
   [style.color]="pbColor"
   [class.loading-foreground]="showForeground"
   [class.foreground-closing]="foregroundClosing"></div>
+<!-- Progress bar }}} -->
 
+<!-- Foreground container {{{ -->
 <div class="ngx-overlay"
   [style.background-color]="overlayColor"
   [class.loading-foreground]="showForeground"
   [class.foreground-closing]="foregroundClosing">
+
+  <!-- Logo {{{ -->
   <img *ngIf="logoUrl" class="ngx-loading-logo"
-    [ngClass]="realLogoPosition" [src]="trustedLogoUrl"
-    [style.width.px]="logoSize" [style.height.px]="logoSize">
+    [ngClass]="logoPosition" [src]="trustedLogoUrl"
+    [style.width.px]="logoSize" [style.height.px]="logoSize"
+    [style.top]="logoTop">
+  <!-- Logo }}} -->
+
+  <!-- Foreground spinner {{{ -->
   <div class="ngx-foreground-spinner"
     [ngClass]="fgsPosition" [style.color]="fgsColor"
-    [style.width.px]="fgsSize" [style.height.px]="fgsSize">
+    [style.width.px]="fgsSize" [style.height.px]="fgsSize"
+    [style.top]="spinnerTop">
     <div [class]="fgSpinnerClass">
       <div *ngFor="let div of fgDivs"></div>
     </div>
   </div>
+  <!-- Foreground spinner }}} -->
+
+  <!-- Loading text {{{ -->
   <div class="ngx-loading-text"
-    [ngClass]="realTextPosition"
+    [ngClass]="textPosition"
+    [style.top]="textTop"
     [style.color]="textColor">{{text}}</div>
+  <!-- Loading text }}} -->
+
 </div>
+<!-- Foreground container }}} -->
 
+<!-- Background spinner {{{ -->
 <div class="ngx-background-spinner"
   [ngClass]="bgsPosition"
   [class.loading-background]="showBackground"
@@ -32,4 +50,5 @@
   <div [class]="bgSpinnerClass">
     <div *ngFor="let div of bgDivs"></div>
   </div>
-</div>
+</div>
+<!-- Background spinner }}} -->

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

@@ -209,22 +209,22 @@ $spinnerSize: 60px;
 }
 
 .ngx-overlay > .ngx-foreground-spinner {
-  position: absolute;
+  position: fixed;
   width: $spinnerSize;
   height: $spinnerSize;
   margin: 0;
   color: $spinnerColor;
 }
 
 .ngx-overlay > .ngx-loading-logo {
-  position: absolute;
+  position: fixed;
   margin: 0;
   width: $logoSize;
   height: $logoSize;
 }
 
 .ngx-overlay > .ngx-loading-text {
-  position: absolute;
+  position: fixed;
   margin: 0;
   font-family: sans-serif;
   font-weight: $loadingTextFontWeight;
@@ -320,32 +320,6 @@ $spinnerSize: 60px;
   right: 30px;
 }
 
-.ngx-loading-text-center-with-logo {
-  position: fixed;
-  top: calc(50% + 60px + 36px);
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-      -ms-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-}
-
-.ngx-loading-text-center-with-spinner {
-  position: fixed;
-  top: calc(50% + 30px + 36px);
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-      -ms-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-}
-
-.ngx-loading-logo-center-with-spinner {
-  position: fixed;
-  top: calc(50% - 30px - 84px);
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-      -ms-transform: translate(-50%, -50%);
-          transform: translate(-50%, -50%);
-}
 // Utility classes }}}
 
 // sk-rotating-plane {{{

projects/ngx-ui-loader/src/lib/ngx-ui-loader.component.ts

@@ -21,6 +21,7 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
   @Input() fgsPosition: string;
   @Input() fgsSize: number;
   @Input() fgsType: string;
+  @Input() gap: number;
   @Input() logoPosition: string;
   @Input() logoSize: number;
   @Input() logoUrl: string;
@@ -41,9 +42,10 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
   foregroundClosing: boolean;
   backgroundClosing: boolean;
 
-  realTextPosition: string;
-  realLogoPosition: string;
   trustedLogoUrl: any;
+  logoTop: any;
+  spinnerTop: any;
+  textTop: any;
 
   showForegroundWatcher: Subscription;
   showBackgroundWatcher: Subscription;
@@ -69,6 +71,7 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
     this.fgsPosition = this.defaultConfig.fgsPosition;
     this.fgsSize = this.defaultConfig.fgsSize;
     this.fgsType = this.defaultConfig.fgsType;
+    this.gap = this.defaultConfig.gap;
     this.logoPosition = this.defaultConfig.logoPosition;
     this.logoSize = this.defaultConfig.logoSize;
     this.logoUrl = this.defaultConfig.logoUrl;
@@ -79,8 +82,6 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
     this.text = this.defaultConfig.text;
     this.textColor = this.defaultConfig.textColor;
     this.textPosition = this.defaultConfig.textPosition;
-    this.realLogoPosition = this.logoPosition;
-    this.realTextPosition = this.textPosition;
   }
 
   ngOnInit() {
@@ -110,21 +111,15 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
 
     const fgsTypeChange: SimpleChange = changes.fgsType;
     const bgsTypeChange: SimpleChange = changes.bgsType;
-    const fgsPositionChange: SimpleChange = changes.fgsPosition;
     const bgsPositionChange: SimpleChange = changes.bgsPosition;
-    const logoPositionChange: SimpleChange = changes.logoPosition;
     const logoUrlChange: SimpleChange = changes.logoUrl;
-    const textPositionChange: SimpleChange = changes.textPosition;
-    const textChange: SimpleChange = changes.text;
     const progressBarDirectionChange: SimpleChange = changes.pbDirection;
 
     if (fgsTypeChange || bgsTypeChange) {
       this.initializeSpinners();
     }
 
-    if (fgsPositionChange || logoPositionChange || logoUrlChange || textChange || textPositionChange) {
-      this.determinePositions();
-    }
+    this.determinePositions();
 
     if (logoUrlChange) {
       this.trustedLogoUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(this.logoUrl);
@@ -155,22 +150,59 @@ export class NgxUiLoaderComponent implements OnChanges, OnDestroy, OnInit {
     this.logoPosition = this.helperService.validatePosition('logoPosition', this.logoPosition, this.defaultConfig.logoPosition);
     this.textPosition = this.helperService.validatePosition('textPosition', this.textPosition, this.defaultConfig.textPosition);
 
-    this.realLogoPosition = this.logoPosition;
-    this.realTextPosition = this.textPosition;
+    this.logoTop = 'initial';
+    this.spinnerTop = 'initial';
+    this.textTop = 'initial';
+    const textSize = 24;
+
+    if (this.logoPosition.startsWith('center')) {
+      this.logoTop = '50%';
+    } else if (this.logoPosition.startsWith('top')) {
+      this.logoTop = '30px';
+    }
+
+    if (this.fgsPosition.startsWith('center')) {
+      this.spinnerTop = '50%';
+    } else if (this.fgsPosition.startsWith('top')) {
+      this.spinnerTop = '30px';
+    }
+
+    if (this.textPosition.startsWith('center')) {
+      this.textTop = '50%';
+    } else if (this.textPosition.startsWith('top')) {
+      this.textTop = '30px';
+    }
+
     if (this.fgsPosition === NGX_POSITIONS.centerCenter) {
       if (this.logoUrl && this.logoPosition === NGX_POSITIONS.centerCenter) {
-        if (this.textPosition === NGX_POSITIONS.centerCenter) {
-          this.realTextPosition = 'ngx-loading-text-center-with-spinner';
+        if (this.text && this.textPosition === NGX_POSITIONS.centerCenter) { // logo, spinner and text
+          this.logoTop = this.domSanitizer
+            .bypassSecurityTrustStyle(`calc(50% - ${this.fgsSize / 2}px - ${textSize / 2}px - ${this.gap}px)`);
+          this.spinnerTop = this.domSanitizer
+            .bypassSecurityTrustStyle(`calc(50% + ${this.logoSize / 2}px - ${textSize / 2}px)`);
+          this.textTop = this.domSanitizer
+            .bypassSecurityTrustStyle(`calc(50% + ${this.logoSize / 2}px + ${this.gap}px + ${this.fgsSize / 2}px)`);
+        } else { // logo and spinner
+          this.logoTop = this.domSanitizer
+            .bypassSecurityTrustStyle(`calc(50% - ${this.fgsSize / 2}px - ${this.gap / 2}px)`);
+          this.spinnerTop = this.domSanitizer
+            .bypassSecurityTrustStyle(`calc(50% + ${this.logoSize / 2}px + ${this.gap / 2}px)`);
         }
-        this.realLogoPosition = 'ngx-loading-logo-center-with-spinner';
       } else {
-        if (this.textPosition === NGX_POSITIONS.centerCenter) {
-          this.realTextPosition = 'ngx-loading-text-center-with-spinner';
+        if (this.text && this.textPosition === NGX_POSITIONS.centerCenter) { // spinner and text
+          this.spinnerTop = this.domSanitizer
+            .bypassSecurityTrustStyle(`calc(50% - ${textSize / 2}px - ${this.gap / 2}px)`);
+          this.textTop = this.domSanitizer
+            .bypassSecurityTrustStyle(`calc(50% + ${this.fgsSize / 2}px + ${this.gap / 2}px)`);
         }
       }
     } else {
-      if (this.logoUrl && this.logoPosition === NGX_POSITIONS.centerCenter && this.textPosition === NGX_POSITIONS.centerCenter) {
-        this.realTextPosition = 'ngx-loading-text-center-with-logo';
+      if (this.logoUrl && this.logoPosition === NGX_POSITIONS.centerCenter
+        && this.text && this.textPosition === NGX_POSITIONS.centerCenter) { // logo and text
+        this.logoTop = this.domSanitizer
+          .bypassSecurityTrustStyle(`calc(50% - ${textSize / 2}px - ${this.gap / 2}px)`);
+        this.textTop = this.domSanitizer
+          .bypassSecurityTrustStyle(`calc(50% + ${this.logoSize / 2}px + ${this.gap / 2}px)`);
       }
     }
   }

projects/ngx-ui-loader/src/lib/ngx-ui-loader.contants.ts

@@ -108,6 +108,7 @@ export const DEFAULT_CONFIG: NgxUiLoaderConfig = {
   fgsPosition: NGX_POSITIONS.centerCenter,
   fgsSize: 60,
   fgsType: SPINNER_TYPES.rectangleBounce,
+  gap: 24,
   logoPosition: NGX_POSITIONS.centerCenter,
   logoSize: 120,
   logoUrl: '',

src/app/app.component.html

@@ -8,6 +8,7 @@
   [bgsPosition]="config.bgsPosition"
   [bgsSize]="config.bgsSize"
   [bgsType]="config.bgsType"
+  [gap]="config.gap"
   [logoPosition]="config.logoPosition"
   [logoSize]="config.logoSize"
   [logoUrl]="config.logoUrl"
@@ -193,14 +194,15 @@ <h3>A fully customizable loader/spinner for angular 5+ and 6+</h3>
         <mat-icon matSuffix [style.color]="config.pbColor" fontIcon="mdi-palette" fontSet="mdi"></mat-icon>
       </mat-form-field>
 
+      <div>
+        <span class="place-holder">Gap between logo, spinner and text (gap)</span>
+        <mat-slider fxFlex="100" max="150" min="10" step="1" [thumbLabel]="true" [(ngModel)]="config.gap"></mat-slider>
+      </div>
+
       <div style="margin-top: 21px; margin-bottom: 20px">
         <mat-checkbox (change)="addLogo($event.checked)" [checked]="config.logoUrl">Add logo</mat-checkbox>
       </div>
 
-      <mat-form-field>
-        <input matInput placeholder="Logo (logoUrl)" [(ngModel)]="config.logoUrl" autocomplete="off" disabled>
-      </mat-form-field>
-
       <mat-form-field>
         <mat-select placeholder="Logo Position (logoPosition)" [(value)]="config.logoPosition" [disabled]="!config.logoUrl">
           <mat-option *ngFor="let position of positions" [value]="position">