ngx-ui-loader
Version:
An all-in-one and fully customizable loader/spinner for Angular applications. It supports foreground, background spinner/loader, indicative progress bar and multiple loaders.
864 lines (859 loc) • 103 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, Optional, Inject, Injectable, Input, ChangeDetectionStrategy, Component, Directive, NgModule, SkipSelf } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import { filter, finalize } from 'rxjs/operators';
import * as i1 from '@angular/platform-browser';
import * as i1$1 from '@angular/router';
import { NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
/**
* Available spinner types
*/
var SPINNER;
(function (SPINNER) {
SPINNER["ballScaleMultiple"] = "ball-scale-multiple";
SPINNER["ballSpin"] = "ball-spin";
SPINNER["ballSpinClockwise"] = "ball-spin-clockwise";
SPINNER["ballSpinClockwiseFadeRotating"] = "ball-spin-clockwise-fade-rotating";
SPINNER["ballSpinFadeRotating"] = "ball-spin-fade-rotating";
SPINNER["chasingDots"] = "chasing-dots";
SPINNER["circle"] = "circle";
SPINNER["cubeGrid"] = "cube-grid";
SPINNER["doubleBounce"] = "double-bounce";
SPINNER["fadingCircle"] = "fading-circle";
SPINNER["foldingCube"] = "folding-cube";
SPINNER["pulse"] = "pulse";
SPINNER["rectangleBounce"] = "rectangle-bounce";
SPINNER["rectangleBounceParty"] = "rectangle-bounce-party";
SPINNER["rectangleBouncePulseOut"] = "rectangle-bounce-pulse-out";
SPINNER["rectangleBouncePulseOutRapid"] = "rectangle-bounce-pulse-out-rapid";
SPINNER["rotatingPlane"] = "rotating-plane";
SPINNER["squareJellyBox"] = "square-jelly-box";
SPINNER["squareLoader"] = "square-loader";
SPINNER["threeBounce"] = "three-bounce";
SPINNER["threeStrings"] = "three-strings";
SPINNER["wanderingCubes"] = "wandering-cubes";
})(SPINNER || (SPINNER = {}));
/**
* Available postions
*/
var POSITION;
(function (POSITION) {
POSITION["bottomCenter"] = "bottom-center";
POSITION["bottomLeft"] = "bottom-left";
POSITION["bottomRight"] = "bottom-right";
POSITION["centerCenter"] = "center-center";
POSITION["centerLeft"] = "center-left";
POSITION["centerRight"] = "center-right";
POSITION["topCenter"] = "top-center";
POSITION["topLeft"] = "top-left";
POSITION["topRight"] = "top-right";
})(POSITION || (POSITION = {}));
/**
* Progress bar directions
*/
var PB_DIRECTION;
(function (PB_DIRECTION) {
PB_DIRECTION["leftToRight"] = "ltr";
PB_DIRECTION["rightToLeft"] = "rtl";
})(PB_DIRECTION || (PB_DIRECTION = {}));
/**
* The default value of foreground task id
*/
const DEFAULT_FG_TASK_ID = 'fg-default';
/**
* The default value of background task id
*/
const DEFAULT_BG_TASK_ID = 'bg-default';
/**
* The default value of loader id
*/
const DEFAULT_MASTER_LOADER_ID = 'master';
const DEFAULT_TIME = {};
const MIN_DELAY = 0;
const MIN_TIME = 0;
const CLOSING_TIME = 1001;
const FAST_CLOSING_TIME = 601;
const BACKGROUND = false;
const FOREGROUND = true;
const OVERLAY_DISAPPEAR_TIME = 500;
const FAST_OVERLAY_DISAPPEAR_TIME = 300;
/**
* Http loader taskId
*/
const HTTP_LOADER_TASK_ID = '$_http-loader';
/**
* Router loader taskId
*/
const ROUTER_LOADER_TASK_ID = '$_router_loader';
/**
* The configuration of spinners
*/
const SPINNER_CONFIG = {
'ball-scale-multiple': {
divs: 3,
class: 'sk-ball-scale-multiple',
},
'ball-spin': {
divs: 8,
class: 'sk-ball-spin',
},
'ball-spin-clockwise': {
divs: 8,
class: 'sk-ball-spin-clockwise',
},
'ball-spin-clockwise-fade-rotating': {
divs: 8,
class: 'sk-ball-spin-clockwise-fade-rotating',
},
'ball-spin-fade-rotating': {
divs: 8,
class: 'sk-ball-spin-fade-rotating',
},
'chasing-dots': {
divs: 2,
class: 'sk-chasing-dots',
},
circle: {
divs: 12,
class: 'sk-circle',
},
'cube-grid': {
divs: 9,
class: 'sk-cube-grid',
},
'double-bounce': {
divs: 2,
class: 'sk-double-bounce',
},
'fading-circle': {
divs: 12,
class: 'sk-fading-circle',
},
'folding-cube': {
divs: 4,
class: 'sk-folding-cube',
},
pulse: {
divs: 1,
class: 'sk-pulse',
},
'rectangle-bounce': {
divs: 5,
class: 'sk-rectangle-bounce',
},
'rectangle-bounce-party': {
divs: 5,
class: 'sk-rectangle-bounce-party',
},
'rectangle-bounce-pulse-out': {
divs: 5,
class: 'sk-rectangle-bounce-pulse-out',
},
'rectangle-bounce-pulse-out-rapid': {
divs: 5,
class: 'sk-rectangle-bounce-pulse-out-rapid',
},
'rotating-plane': {
divs: 1,
class: 'sk-rotating-plane',
},
'square-jelly-box': {
divs: 2,
class: 'sk-square-jelly-box',
},
'square-loader': {
divs: 1,
class: 'sk-square-loader',
},
'three-bounce': {
divs: 3,
class: 'sk-three-bounce',
},
'three-strings': {
divs: 3,
class: 'sk-three-strings',
},
'wandering-cubes': {
divs: 2,
class: 'sk-wandering-cubes',
},
};
/**
* The default configuration of ngx-ui-loader
*/
const DEFAULT_CONFIG = {
bgsColor: '#00ACC1',
bgsOpacity: 0.5,
bgsPosition: POSITION.bottomRight,
bgsSize: 60,
bgsType: SPINNER.ballSpinClockwise,
blur: 5,
delay: 0,
fastFadeOut: false,
fgsColor: '#00ACC1',
fgsPosition: POSITION.centerCenter,
fgsSize: 60,
fgsType: SPINNER.ballSpinClockwise,
gap: 24,
logoPosition: POSITION.centerCenter,
logoSize: 120,
logoUrl: '',
masterLoaderId: DEFAULT_MASTER_LOADER_ID,
overlayBorderRadius: '0',
overlayColor: 'rgba(40, 40, 40, 0.8)',
pbColor: '#00ACC1',
pbDirection: PB_DIRECTION.leftToRight,
pbThickness: 3,
hasProgressBar: true,
text: '',
textColor: '#FFFFFF',
textPosition: POSITION.centerCenter,
maxTime: -1,
minTime: 300,
};
/**
* Injection token for ngx-ui-loader configuration
*/
const NGX_UI_LOADER_CONFIG_TOKEN = new InjectionToken('ngxUiLoaderCustom.config');
class NgxUiLoaderService {
/**
* Constructor
*/
constructor(config) {
this.config = config;
this.defaultConfig = { ...DEFAULT_CONFIG };
if (this.config) {
if (this.config.minTime && this.config.minTime < MIN_TIME) {
this.config.minTime = MIN_TIME;
}
this.defaultConfig = { ...this.defaultConfig, ...this.config };
}
this.loaders = {};
this.showForeground = new BehaviorSubject({
loaderId: '',
isShow: false,
});
this.showForeground$ = this.showForeground.asObservable();
this.showBackground = new BehaviorSubject({
loaderId: '',
isShow: false,
});
this.showBackground$ = this.showBackground.asObservable();
this.fgClosing = new BehaviorSubject({
loaderId: '',
isShow: false,
});
this.foregroundClosing$ = this.fgClosing.asObservable();
this.bgClosing = new BehaviorSubject({
loaderId: '',
isShow: false,
});
this.backgroundClosing$ = this.bgClosing.asObservable();
}
/**
* For internal use only.
*
* @docs-private
*/
bindLoaderData(loaderId) {
const isMaster = loaderId === this.defaultConfig.masterLoaderId;
if (this.loaders[loaderId]) {
if (this.loaders[loaderId].isBound) {
throw new Error(`[ngx-ui-loader] - loaderId "${loaderId}" is duplicated.`);
}
this.loaders[loaderId].isBound = true;
this.loaders[loaderId].isMaster = isMaster;
// emit showEvent after data loader is bound
if (this.hasRunningTask(FOREGROUND, loaderId)) {
this.showForeground.next({ loaderId, isShow: true });
}
else {
if (this.hasRunningTask(BACKGROUND, loaderId)) {
this.showBackground.next({ loaderId, isShow: true });
}
}
}
else {
this.createLoaderData(loaderId, isMaster, true);
}
}
/**
* For internal use only.
*
* @docs-private
*/
destroyLoaderData(loaderId) {
this.stopAllLoader(loaderId);
delete this.loaders[loaderId];
}
/**
* Get default loader configuration
*
* @returns default configuration object
*/
getDefaultConfig() {
return { ...this.defaultConfig };
}
/**
* Get all the loaders
*/
getLoaders() {
return JSON.parse(JSON.stringify(this.loaders));
}
/**
* Get data of a specified loader. If loaderId is not provided, it will return data of
* master loader(if existed). Otherwise null is returned.
*/
getLoader(loaderId) {
loaderId = loaderId ? loaderId : this.defaultConfig.masterLoaderId;
if (this.loaders[loaderId]) {
return JSON.parse(JSON.stringify(this.loaders[loaderId]));
}
return null;
}
/**
* Start the foreground loading of loader having `loaderId` with a specified `taskId`.
* The loading is only closed off when all taskIds of that loader are called with stopLoader() method.
*
* @param loaderId the loader Id
* @param taskId the optional task Id of the loading. taskId is set to 'fd-default' by default.
*/
startLoader(loaderId, taskId = DEFAULT_FG_TASK_ID, time) {
if (!this.readyToStart(loaderId, taskId, true, time)) {
return;
}
if (!this.loaders[loaderId].tasks[taskId].isOtherRunning) {
// no other foreground task running
if (this.hasRunningTask(BACKGROUND, loaderId)) {
this.backgroundCloseout(loaderId);
this.showBackground.next({ loaderId, isShow: false });
}
this.showForeground.next({ loaderId, isShow: true });
}
}
/**
* Start the foreground loading of master loader with a specified `taskId`.
* The loading is only closed off when all taskIds of that loader are called with stop() method.
* NOTE: Really this function just wraps startLoader() function
*
* @param taskId the optional task Id of the loading. taskId is set to 'fd-default' by default.
*/
start(taskId = DEFAULT_FG_TASK_ID, time) {
this.startLoader(this.defaultConfig.masterLoaderId, taskId, time);
}
/**
* Start the background loading of loader having `loaderId` with a specified `taskId`.
* The loading is only closed off when all taskIds of that loader are called with stopLoaderBackground() method.
*
* @param loaderId the loader Id
* @param taskId the optional task Id of the loading. taskId is set to 'bg-default' by default.
*/
startBackgroundLoader(loaderId, taskId = DEFAULT_BG_TASK_ID, time) {
if (!this.readyToStart(loaderId, taskId, false, time)) {
return;
}
if (!this.hasRunningTask(FOREGROUND, loaderId) &&
!this.loaders[loaderId].tasks[taskId].isOtherRunning) {
this.showBackground.next({ loaderId, isShow: true });
}
}
/**
* Start the background loading of master loader with a specified `taskId`.
* The loading is only closed off when all taskIds of that loader are called with stopBackground() method.
* NOTE: Really this function just wraps startBackgroundLoader() function
*
* @param taskId the optional task Id of the loading. taskId is set to 'bg-default' by default.
*/
startBackground(taskId = DEFAULT_BG_TASK_ID, time) {
this.startBackgroundLoader(this.defaultConfig.masterLoaderId, taskId, time);
}
/**
* Stop a foreground loading of loader having `loaderId` with specific `taskId`
*
* @param loaderId the loader Id
* @param taskId the optional task Id to stop. If not provided, 'fg-default' is used.
* @returns Object
*/
stopLoader(loaderId, taskId = DEFAULT_FG_TASK_ID) {
if (!this.readyToStop(loaderId, taskId)) {
return;
}
if (!this.hasRunningTask(FOREGROUND, loaderId)) {
this.foregroundCloseout(loaderId);
this.showForeground.next({ loaderId, isShow: false });
if (this.hasRunningTask(BACKGROUND, loaderId)) {
setTimeout(() => {
if (this.hasRunningTask(BACKGROUND, loaderId)) {
// still have background tasks
this.showBackground.next({ loaderId, isShow: true });
}
}, this.defaultConfig.fastFadeOut
? FAST_OVERLAY_DISAPPEAR_TIME
: OVERLAY_DISAPPEAR_TIME);
}
}
}
/**
* Stop a foreground loading of master loader with specific `taskId`
*
* @param taskId the optional task Id to stop. If not provided, 'fg-default' is used.
* @returns Object
*/
stop(taskId = DEFAULT_FG_TASK_ID) {
this.stopLoader(this.defaultConfig.masterLoaderId, taskId);
}
/**
* Stop a background loading of loader having `loaderId` with specific `taskId`
*
* @param loaderId the loader Id
* @param taskId the optional task Id to stop. If not provided, 'bg-default' is used.
* @returns Object
*/
stopBackgroundLoader(loaderId, taskId = DEFAULT_BG_TASK_ID) {
if (!this.readyToStop(loaderId, taskId)) {
return;
}
if (!this.hasRunningTask(FOREGROUND, loaderId) &&
!this.hasRunningTask(BACKGROUND, loaderId)) {
this.backgroundCloseout(loaderId);
this.showBackground.next({ loaderId, isShow: false });
}
}
/**
* Stop a background loading of master loader with specific taskId
*
* @param taskId the optional task Id to stop. If not provided, 'bg-default' is used.
* @returns Object
*/
stopBackground(taskId = DEFAULT_BG_TASK_ID) {
this.stopBackgroundLoader(this.defaultConfig.masterLoaderId, taskId);
}
/**
* Stop all the background and foreground loadings of loader having `loaderId`
*
* @param loaderId the loader Id
*/
stopAllLoader(loaderId) {
if (!this.loaders[loaderId]) {
console.warn(`[ngx-ui-loader] - loaderId "${loaderId}" does not exist.`);
return;
}
if (this.hasRunningTask(FOREGROUND, loaderId)) {
this.foregroundCloseout(loaderId);
this.showForeground.next({ loaderId, isShow: false });
}
else if (this.hasRunningTask(BACKGROUND, loaderId)) {
this.backgroundCloseout(loaderId);
this.showBackground.next({ loaderId, isShow: false });
}
this.clearAllTimers(this.loaders[loaderId].tasks);
this.loaders[loaderId].tasks = {};
}
/**
* Stop all the background and foreground loadings of master loader
*/
stopAll() {
this.stopAllLoader(this.defaultConfig.masterLoaderId);
}
/**
* Check whether the specified loader has a running task with the given `taskId`.
* If no `taskId` specified, it will check whether the loader has any running tasks.
* For internal use only.
*
* @docs-private
* @param isForeground foreground task or background task
* @param loaderId the loader Id
* @param taskId the optional task Id
* @returns boolean
*/
hasRunningTask(isForeground, loaderId, taskId) {
if (this.loaders[loaderId]) {
const tasks = this.loaders[loaderId].tasks;
if (taskId) {
return tasks[taskId] ? (tasks[taskId].startAt ? true : false) : false;
}
return Object.keys(tasks).some((id) => !!tasks[id].startAt && tasks[id].isForeground === isForeground);
}
return false;
}
/**
* Create loader data if it does not exist
*
* @docs-private
*/
createLoaderData(loaderId, isMaster, isBound) {
if (!this.loaders[loaderId]) {
this.loaders[loaderId] = {
loaderId,
tasks: {},
isMaster,
isBound,
};
}
}
/**
* Manage to close foreground loading
*
* @docs-private
* @param loaderId the loader id
*/
foregroundCloseout(loaderId) {
this.fgClosing.next({ loaderId, isShow: true });
setTimeout(() => {
this.fgClosing.next({ loaderId, isShow: false });
}, this.defaultConfig.fastFadeOut ? FAST_CLOSING_TIME : CLOSING_TIME);
}
/**
* Manage to close background loading
*
* @docs-private
* @param loaderId the loader id
*/
backgroundCloseout(loaderId) {
this.bgClosing.next({ loaderId, isShow: true });
setTimeout(() => {
this.bgClosing.next({ loaderId, isShow: false });
}, this.defaultConfig.fastFadeOut ? FAST_CLOSING_TIME : CLOSING_TIME);
}
/**
* Clear all timers of the given task
*
* @docs-private
*/
clearTimers(task) {
clearTimeout(task.delayTimer);
clearTimeout(task.maxTimer);
clearTimeout(task.minTimer);
}
/**
* Clear all timers of the given tasks
*
* @docs-private
*/
clearAllTimers(tasks) {
Object.keys(tasks).map((id) => {
this.clearTimers(tasks[id]);
});
}
/**
* @docs-private
*/
readyToStart(loaderId, taskId, isForeground, time = DEFAULT_TIME) {
this.createLoaderData(loaderId, undefined, false);
const isOtherRunning = this.hasRunningTask(isForeground, loaderId);
if (!this.loaders[loaderId].tasks[taskId]) {
this.loaders[loaderId].tasks[taskId] = {
taskId,
isForeground,
minTime: time.minTime >= MIN_TIME ? time.minTime : this.defaultConfig.minTime,
maxTime: time.maxTime ? time.maxTime : this.defaultConfig.maxTime,
delay: time.delay >= MIN_DELAY ? time.delay : this.defaultConfig.delay,
};
}
else {
if (this.loaders[loaderId].tasks[taskId].isForeground !== isForeground) {
throw new Error(`[ngx-ui-loader] - taskId "${taskId}" is duplicated.`);
}
}
if (this.setDelayTimer(this.loaders[loaderId].tasks[taskId], loaderId)) {
return false;
}
this.loaders[loaderId].tasks[taskId] = {
...this.loaders[loaderId].tasks[taskId],
isOtherRunning,
startAt: Date.now(),
};
this.setMaxTimer(this.loaders[loaderId].tasks[taskId], loaderId);
if (!this.loaders[loaderId].isBound) {
return false;
}
return true;
}
/**
* @docs-private
*/
readyToStop(loaderId, taskId) {
if (!this.loaders[loaderId]) {
console.warn(`[ngx-ui-loader] - loaderId "${loaderId}" does not exist.`);
return false;
}
const task = this.loaders[loaderId].tasks[taskId];
if (!task) {
return false;
}
if (task.isDelayed) {
this.clearTimers(task);
delete this.loaders[loaderId].tasks[taskId];
return false;
}
if (this.setMinTimer(task, loaderId)) {
return false;
}
this.clearTimers(task);
delete this.loaders[loaderId].tasks[taskId];
return true;
}
/**
* Set delay timer, if `delay` > 0
*
* @docs-private
* @returns boolean
*/
setDelayTimer(task, loaderId) {
if (task.delay > MIN_DELAY) {
if (task.isDelayed) {
return true;
}
if (!task.delayTimer) {
task.isDelayed = true;
task.delayTimer = setTimeout(() => {
task.isDelayed = false;
if (task.isForeground) {
this.startLoader(loaderId, task.taskId);
}
else {
this.startBackgroundLoader(loaderId, task.taskId);
}
}, task.delay);
return true;
}
}
return false;
}
/**
* Set maxTimer if `maxTime` > `minTime`
*
* @docs-private
* @returns boolean
*/
setMaxTimer(task, loaderId) {
if (task.maxTime > task.minTime) {
// restart the task, reset maxTimer
clearTimeout(task.maxTimer);
task.maxTimer = setTimeout(() => {
if (task.isForeground) {
this.stopLoader(loaderId, task.taskId);
}
else {
this.stopBackgroundLoader(loaderId, task.taskId);
}
}, task.maxTime);
}
}
/**
* Set minTimer if `startAt` + `minTime` > `Date.now()`
*
* @docs-private
* @returns boolean
*/
setMinTimer(task, loaderId) {
const now = Date.now();
if (task.startAt) {
if (task.startAt + task.minTime > now) {
task.minTimer = setTimeout(() => {
if (task.isForeground) {
this.stopLoader(loaderId, task.taskId);
}
else {
this.stopBackgroundLoader(loaderId, task.taskId);
}
}, task.startAt + task.minTime - now);
return true;
}
}
return false;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxUiLoaderService, deps: [{ token: NGX_UI_LOADER_CONFIG_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxUiLoaderService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxUiLoaderService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root',
}]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [NGX_UI_LOADER_CONFIG_TOKEN]
}] }] });
/* eslint-disable @angular-eslint/component-selector */
/* eslint-disable @angular-eslint/prefer-standalone */
class NgxUiLoaderComponent {
/**
* Constructor
*/
constructor(domSanitizer, changeDetectorRef, ngxService) {
this.domSanitizer = domSanitizer;
this.changeDetectorRef = changeDetectorRef;
this.ngxService = ngxService;
this.initialized = false;
this.defaultConfig = this.ngxService.getDefaultConfig();
this.bgsColor = this.defaultConfig.bgsColor;
this.bgsOpacity = this.defaultConfig.bgsOpacity;
this.bgsPosition = this.defaultConfig.bgsPosition;
this.bgsSize = this.defaultConfig.bgsSize;
this.bgsType = this.defaultConfig.bgsType;
this.fastFadeOut = this.defaultConfig.fastFadeOut;
this.fgsColor = this.defaultConfig.fgsColor;
this.fgsPosition = this.defaultConfig.fgsPosition;
this.fgsSize = this.defaultConfig.fgsSize;
this.fgsType = this.defaultConfig.fgsType;
this.gap = this.defaultConfig.gap;
this.loaderId = this.defaultConfig.masterLoaderId;
this.logoPosition = this.defaultConfig.logoPosition;
this.logoSize = this.defaultConfig.logoSize;
this.logoUrl = this.defaultConfig.logoUrl;
this.overlayBorderRadius = this.defaultConfig.overlayBorderRadius;
this.overlayColor = this.defaultConfig.overlayColor;
this.pbColor = this.defaultConfig.pbColor;
this.pbDirection = this.defaultConfig.pbDirection;
this.pbThickness = this.defaultConfig.pbThickness;
this.hasProgressBar = this.defaultConfig.hasProgressBar;
this.text = this.defaultConfig.text;
this.textColor = this.defaultConfig.textColor;
this.textPosition = this.defaultConfig.textPosition;
}
/**
* On init event
*/
ngOnInit() {
this.initializeSpinners();
this.ngxService.bindLoaderData(this.loaderId);
this.determinePositions();
this.trustedLogoUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(this.logoUrl);
this.showForegroundWatcher = this.ngxService.showForeground$
.pipe(filter((showEvent) => this.loaderId === showEvent.loaderId))
.subscribe((data) => {
this.showForeground = data.isShow;
this.changeDetectorRef.markForCheck();
});
this.showBackgroundWatcher = this.ngxService.showBackground$
.pipe(filter((showEvent) => this.loaderId === showEvent.loaderId))
.subscribe((data) => {
this.showBackground = data.isShow;
this.changeDetectorRef.markForCheck();
});
this.foregroundClosingWatcher = this.ngxService.foregroundClosing$
.pipe(filter((showEvent) => this.loaderId === showEvent.loaderId))
.subscribe((data) => {
this.foregroundClosing = data.isShow;
this.changeDetectorRef.markForCheck();
});
this.backgroundClosingWatcher = this.ngxService.backgroundClosing$
.pipe(filter((showEvent) => this.loaderId === showEvent.loaderId))
.subscribe((data) => {
this.backgroundClosing = data.isShow;
this.changeDetectorRef.markForCheck();
});
this.initialized = true;
}
/**
* On changes event
*/
ngOnChanges(changes) {
if (!this.initialized) {
return;
}
const bgsTypeChange = changes['bgsType'];
const fgsTypeChange = changes['fgsType'];
const logoUrlChange = changes['logoUrl'];
if (fgsTypeChange || bgsTypeChange) {
this.initializeSpinners();
}
this.determinePositions();
if (logoUrlChange) {
this.trustedLogoUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(this.logoUrl);
}
}
/**
* On destroy event
*/
ngOnDestroy() {
this.ngxService.destroyLoaderData(this.loaderId);
if (this.showForegroundWatcher) {
this.showForegroundWatcher.unsubscribe();
}
if (this.showBackgroundWatcher) {
this.showBackgroundWatcher.unsubscribe();
}
if (this.foregroundClosingWatcher) {
this.foregroundClosingWatcher.unsubscribe();
}
if (this.backgroundClosingWatcher) {
this.backgroundClosingWatcher.unsubscribe();
}
}
/**
* Initialize spinners
*/
initializeSpinners() {
this.fgDivs = Array(SPINNER_CONFIG[this.fgsType].divs).fill(1);
this.fgSpinnerClass = SPINNER_CONFIG[this.fgsType].class;
this.bgDivs = Array(SPINNER_CONFIG[this.bgsType].divs).fill(1);
this.bgSpinnerClass = SPINNER_CONFIG[this.bgsType].class;
}
/**
* Determine the positions of spinner, logo and text
*/
determinePositions() {
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 === POSITION.centerCenter) {
if (this.logoUrl && this.logoPosition === POSITION.centerCenter) {
if (this.text && this.textPosition === POSITION.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)`);
}
}
else {
if (this.text && this.textPosition === POSITION.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 === POSITION.centerCenter &&
this.text &&
this.textPosition === POSITION.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)`);
}
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxUiLoaderComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: NgxUiLoaderService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NgxUiLoaderComponent, isStandalone: false, selector: "ngx-ui-loader", inputs: { bgsColor: "bgsColor", bgsOpacity: "bgsOpacity", bgsPosition: "bgsPosition", bgsSize: "bgsSize", bgsTemplate: "bgsTemplate", bgsType: "bgsType", fgsColor: "fgsColor", fgsPosition: "fgsPosition", fgsSize: "fgsSize", fgsTemplate: "fgsTemplate", fgsType: "fgsType", gap: "gap", loaderId: "loaderId", logoPosition: "logoPosition", logoSize: "logoSize", logoUrl: "logoUrl", overlayBorderRadius: "overlayBorderRadius", overlayColor: "overlayColor", pbColor: "pbColor", pbDirection: "pbDirection", pbThickness: "pbThickness", hasProgressBar: "hasProgressBar", text: "text", textColor: "textColor", textPosition: "textPosition" }, usesOnChanges: true, ngImport: i0, template: "<!-- Progress bar {{{ -->\n<div\n *ngIf=\"hasProgressBar\"\n class=\"ngx-progress-bar\"\n [class.ngx-position-absolute]=\"loaderId !== defaultConfig.masterLoaderId\"\n [ngClass]=\"'ngx-progress-bar-' + pbDirection\"\n [style.height.px]=\"pbThickness\"\n [style.color]=\"pbColor\"\n [class.loading-foreground]=\"showForeground\"\n [class.foreground-closing]=\"foregroundClosing\"\n [class.fast-closing]=\"foregroundClosing && fastFadeOut\"\n></div>\n<!-- Progress bar }}} -->\n\n<!-- Foreground container {{{ -->\n<div\n class=\"ngx-overlay\"\n [class.ngx-position-absolute]=\"loaderId !== defaultConfig.masterLoaderId\"\n [style.background-color]=\"overlayColor\"\n [style.border-radius]=\"overlayBorderRadius\"\n [class.loading-foreground]=\"showForeground\"\n [class.foreground-closing]=\"foregroundClosing\"\n [class.fast-closing]=\"foregroundClosing && fastFadeOut\"\n>\n <!-- Logo {{{ -->\n <img\n *ngIf=\"logoUrl\"\n class=\"ngx-loading-logo\"\n [ngClass]=\"logoPosition\"\n [src]=\"trustedLogoUrl\"\n [style.width.px]=\"logoSize\"\n [style.height.px]=\"logoSize\"\n [style.top]=\"logoTop\"\n />\n <!-- Logo }}} -->\n\n <!-- Foreground spinner {{{ -->\n <div\n class=\"ngx-foreground-spinner\"\n [ngClass]=\"fgsPosition\"\n [style.color]=\"fgsColor\"\n [style.width.px]=\"fgsSize\"\n [style.height.px]=\"fgsSize\"\n [style.top]=\"spinnerTop\"\n >\n <div *ngIf=\"!fgsTemplate; else foregroundTemplate\" [class]=\"fgSpinnerClass\">\n <div *ngFor=\"let div of fgDivs\"></div>\n </div>\n <ng-template #foregroundTemplate>\n <ng-container *ngTemplateOutlet=\"fgsTemplate\"></ng-container>\n </ng-template>\n </div>\n <!-- Foreground spinner }}} -->\n\n <!-- Loading text {{{ -->\n <div\n class=\"ngx-loading-text\"\n [ngClass]=\"textPosition\"\n [style.top]=\"textTop\"\n [style.color]=\"textColor\"\n >\n <span>{{ text }}</span>\n </div>\n <!-- Loading text }}} -->\n</div>\n<!-- Foreground container }}} -->\n\n<!-- Background spinner {{{ -->\n<div\n class=\"ngx-background-spinner\"\n [class.ngx-position-absolute]=\"loaderId !== defaultConfig.masterLoaderId\"\n [ngClass]=\"bgsPosition\"\n [class.loading-background]=\"showBackground\"\n [class.background-closing]=\"backgroundClosing\"\n [class.fast-closing]=\"backgroundClosing && fastFadeOut\"\n [style.width.px]=\"bgsSize\"\n [style.height.px]=\"bgsSize\"\n [style.color]=\"bgsColor\"\n [style.opacity]=\"bgsOpacity\"\n>\n <div *ngIf=\"!bgsTemplate; else backgroundTemplate\" [class]=\"bgSpinnerClass\">\n <div *ngFor=\"let div of bgDivs\"></div>\n </div>\n <ng-template #backgroundTemplate>\n <ng-container *ngTemplateOutlet=\"bgsTemplate\"></ng-container>\n </ng-template>\n</div>\n<!-- Background spinner }}} -->\n", styles: [".ngx-progress-bar{position:fixed;top:0;left:0;width:100%;height:3px;z-index:99999!important;display:none;color:#00acc1;overflow:hidden}.ngx-progress-bar.loading-foreground,.ngx-progress-bar.foreground-closing{display:block}.ngx-progress-bar.foreground-closing{opacity:0!important;transition:opacity .5s ease-out .5s}.ngx-progress-bar.fast-closing{transition:opacity .3s ease-out .3s!important}.ngx-progress-bar:before,.ngx-progress-bar:after{background-color:currentColor;content:\"\";display:block;width:100%;height:100%;position:absolute;top:0}.ngx-progress-bar-ltr:before{transform:translate3d(-100%,0,0)}.ngx-progress-bar-ltr:after{animation:progressBar-slide-ltr 12s ease-out 0s 1 normal;transform:translate3d(-5%,0,0)}.ngx-progress-bar-rtl:before{transform:translate3d(100%,0,0)}.ngx-progress-bar-rtl:after{animation:progressBar-slide-rtl 12s ease-out 0s 1 normal;transform:translate3d(5%,0,0)}.foreground-closing.ngx-progress-bar-ltr:before{animation:progressBar-slide-complete-ltr 1s ease-out 0s 1;transform:translateZ(0)}.fast-closing.ngx-progress-bar-ltr:before{animation:progressBar-slide-complete-ltr .6s ease-out 0s 1!important}.foreground-closing.ngx-progress-bar-rtl:before{animation:progressBar-slide-complete-rtl 1s ease-out 0s 1;transform:translateZ(0)}.fast-closing.ngx-progress-bar-rtl:before{animation:progressBar-slide-complete-rtl .6s ease-out 0s 1!important}@keyframes progressBar-slide-ltr{0%{transform:translate3d(-100%,0,0)}to{transform:translate3d(-5%,0,0)}}@keyframes progressBar-slide-rtl{0%{transform:translate3d(100%,0,0)}to{transform:translate3d(5%,0,0)}}@keyframes progressBar-slide-complete-ltr{0%{transform:translate3d(-75%,0,0)}50%{transform:translateZ(0)}}@keyframes progressBar-slide-complete-rtl{0%{transform:translate3d(75%,0,0)}50%{transform:translateZ(0)}}.ngx-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99998!important;background-color:#282828cc;cursor:progress;display:none}.ngx-overlay.loading-foreground,.ngx-overlay.foreground-closing{display:block}.ngx-overlay.foreground-closing{opacity:0!important;transition:opacity .5s ease-out .5s}.ngx-overlay.fast-closing{transition:opacity .3s ease-out .3s!important}.ngx-overlay>.ngx-foreground-spinner{position:fixed;width:60px;height:60px;margin:0;color:#00acc1}.ngx-overlay>.ngx-loading-logo{position:fixed;margin:0;width:120px;height:120px}.ngx-overlay>.ngx-loading-text{position:fixed;margin:0;font-family:sans-serif;font-weight:400;font-size:1.2em;color:#fff}.ngx-background-spinner{position:fixed;z-index:99997!important;width:60px;height:60px;margin:0;color:#00acc1;opacity:.6;display:none}.ngx-background-spinner.loading-background,.ngx-background-spinner.background-closing{display:block}.ngx-background-spinner.background-closing{opacity:0!important;transition:opacity .7s ease-out}.ngx-background-spinner.fast-closing{transition:opacity .4s ease-out!important}.ngx-position-absolute{position:absolute!important}.ngx-position-absolute>.ngx-foreground-spinner,.ngx-position-absolute>.ngx-loading-logo,.ngx-position-absolute>.ngx-loading-text{position:absolute!important}.ngx-position-absolute.ngx-progress-bar{z-index:99996!important}.ngx-position-absolute.ngx-overlay{z-index:99995!important}.ngx-position-absolute.ngx-background-spinner{z-index:99994!important}.ngx-position-absolute .sk-square-jelly-box>div:nth-child(1){z-index:99994!important}.top-left{top:30px;left:30px}.top-center{top:30px;left:50%;transform:translate(-50%)}.top-right{top:30px;right:30px}.center-left{top:50%;left:30px;transform:translateY(-50%)}.center-center{top:50%;left:50%;transform:translate(-50%,-50%)}.center-right{top:50%;right:30px;transform:translateY(-50%)}.bottom-left{bottom:30px;left:30px}.bottom-center{bottom:30px;left:50%;transform:translate(-50%)}.bottom-right{bottom:30px;right:30px}.sk-ball-scale-multiple,.sk-ball-scale-multiple>div{position:relative;box-sizing:border-box}.sk-ball-scale-multiple{width:100%;height:100%;font-size:0}.sk-ball-scale-multiple>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.sk-ball-scale-multiple>div{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:100%;opacity:0;animation:ball-scale-multiple 1s 0s linear infinite}.sk-ball-scale-multiple>div:nth-child(2){animation-delay:.2s}.sk-ball-scale-multiple>div:nth-child(3){animation-delay:.4s}@keyframes ball-scale-multiple{0%{opacity:0;transform:scale(0)}5%{opacity:.75}to{opacity:0;transform:scale(1)}}.sk-ball-spin,.sk-ball-spin>div{position:relative;box-sizing:border-box}.sk-ball-spin{width:100%;height:100%;font-size:0}.sk-ball-spin>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.sk-ball-spin>div{position:absolute;top:50%;left:50%;width:25%;height:25%;margin-top:-12.5%;margin-left:-12.5%;border-radius:100%;animation:ball-spin-clockwise 1s infinite ease-in-out}.sk-ball-spin>div:nth-child(1){top:5%;left:50%;animation-delay:-1.125s}.sk-ball-spin>div:nth-child(2){top:18.1801948466%;left:81.8198051534%;animation-delay:-1.25s}.sk-ball-spin>div:nth-child(3){top:50%;left:95%;animation-delay:-1.375s}.sk-ball-spin>div:nth-child(4){top:81.8198051534%;left:81.8198051534%;animation-delay:-1.5s}.sk-ball-spin>div:nth-child(5){top:94.9999999966%;left:50.0000000005%;animation-delay:-1.625s}.sk-ball-spin>div:nth-child(6){top:81.8198046966%;left:18.1801949248%;animation-delay:-1.75s}.sk-ball-spin>div:nth-child(7){top:49.9999750815%;left:5.0000051215%;animation-delay:-1.875s}.sk-ball-spin>div:nth-child(8){top:18.179464974%;left:18.1803700518%;animation-delay:-2s}@keyframes ball-spin{0%,to{opacity:1;transform:scale(1)}20%{opacity:1}80%{opacity:0;transform:scale(0)}}.sk-ball-spin-clockwise,.sk-ball-spin-clockwise>div{position:relative;box-sizing:border-box}.sk-ball-spin-clockwise{width:100%;height:100%;font-size:0}.sk-ball-spin-clockwise>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.sk-ball-spin-clockwise>div{position:absolute;top:50%;left:50%;width:25%;height:25%;margin-top:-12.5%;margin-left:-12.5%;border-radius:100%;animation:ball-spin-clockwise 1s infinite ease-in-out}.sk-ball-spin-clockwise>div:nth-child(1){top:5%;left:50%;animation-delay:-.875s}.sk-ball-spin-clockwise>div:nth-child(2){top:18.1801948466%;left:81.8198051534%;animation-delay:-.75s}.sk-ball-spin-clockwise>div:nth-child(3){top:50%;left:95%;animation-delay:-.625s}.sk-ball-spin-clockwise>div:nth-child(4){top:81.8198051534%;left:81.8198051534%;animation-delay:-.5s}.sk-ball-spin-clockwise>div:nth-child(5){top:94.9999999966%;left:50.0000000005%;animation-delay:-.375s}.sk-ball-spin-clockwise>div:nth-child(6){top:81.8198046966%;left:18.1801949248%;animation-delay:-.25s}.sk-ball-spin-clockwise>div:nth-child(7){top:49.9999750815%;left:5.0000051215%;animation-delay:-.125s}.sk-ball-spin-clockwise>div:nth-child(8){top:18.179464974%;left:18.1803700518%;animation-delay:0s}@keyframes ball-spin-clockwise{0%,to{opacity:1;transform:scale(1)}20%{opacity:1}80%{opacity:0;transform:scale(0)}}.sk-ball-spin-clockwise-fade-rotating,.sk-ball-spin-clockwise-fade-rotating>div{position:relative;box-sizing:border-box}.sk-ball-spin-clockwise-fade-rotating{font-size:0;width:100%;height:100%;animation:ball-spin-clockwise-fade-rotating-rotate 6s infinite linear}.sk-ball-spin-clockwise-fade-rotating>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.sk-ball-spin-clockwise-fade-rotating>div{position:absolute;top:50%;left:50%;width:25%;height:25%;margin-top:-12.5%;margin-left:-12.5%;border-radius:100%;animation:ball-spin-clockwise-fade-rotating 1s infinite linear}.sk-ball-spin-clockwise-fade-rotating>div:nth-child(1){top:5%;left:50%;animation-delay:-.875s}.sk-ball-spin-clockwise-fade-rotating>div:nth-child(2){top:18.1801948466%;left:81.8198051534%;animation-delay:-.75s}.sk-ball-spin-clockwise-fade-rotating>div:nth-child(3){top:50%;left:95%;animation-delay:-.625s}.sk-ball-spin-clockwise-fade-rotating>div:nth-child(4){top:81.8198051534%;left:81.8198051534%;animation-delay:-.5s}.sk-ball-spin-clockwise-fade-rotating>div:nth-child(5){top:94.9999999966%;left:50.0000000005%;animation-delay:-.375s}.sk-ball-spin-clockwise-fade-rotating>div:nth-child(6){top:81.8198046966%;left:18.1801949248%;animation-delay:-.25s}.sk-ball-spin-clockwise-fade-rotating>div:nth-child(7){top:49.9999750815%;left:5.0000051215%;animation-delay:-.125s}.sk-ball-spin-clockwise-fade-rotating>div:nth-child(8){top:18.179464974%;left:18.1803700518%;animation-delay:0s}@keyframes ball-spin-clockwise-fade-rotating-rotate{to{transform:rotate(-360deg)}}@keyframes ball-spin-clockwise-fade-rotating{50%{opacity:.25;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.sk-ball-spin-fade-rotating,.sk-ball-spin-fade-rotating>div{position:relative;box-sizing:border-box}.sk-ball-spin-fade-rotating{width:100%;height:100%;font-size:0;animation:ball-spin-fade-rotate 6s infinite linear}.sk-ball-spin-fade-rotating>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.sk-ball-spin-fade-rotating>div{position:absolute;top:50%;left:50%;width:25%;height:25%;margin-top:-12.5%;margin-left:-12.5%;border-radius:100%;animation:ball-spin-fade 1s infinite linear}.sk-ball-spin-fade-rotating>div:nth-child(1){top:5%;left:50%;animation-delay:-1.125s}.sk-ball-spin-fade-rotating>div:nth-child(2){top:18.1801948466%;left:81.8198051534%;animation-delay:-1.25s}.sk-ball-spin-fade-rotating>div:nth-child(3){top:50%;left:95%;animation-delay:-1.375s}.sk-ball-spin-fade-rotating>div:nth-child(4){top:81.8198051534%;left:81.8198051534%;animation-delay:-1.5s}.sk-ball-spin-fade-rotating>div:nth-child(5){top:94.9999999966%;left:50.0000000005%;animation-delay:-1.625s}.sk-ball-spin-fade-rotating>div:nth-child(6){top:81.8198046966%;left:18.1801949248%;animation-delay:-1.75s}.sk-ball-spin-fade-rotating>div:nth-child(7){top:49.9999750815%;left:5.0000051215%;animation-delay:-1.875s}.sk-ball-spin-fade-rotating>div:nth-child(8){top:18.179464974%;left:18.1803700518%;animation-delay:-2s}@keyframes ball-spin-fade-rotate{to{transform:rotate(360deg)}}@keyframes ball-spin-fade{0%,to{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.5)}}.sk-chasing-dots{margin:auto;width:100%;height:100%;position:absolute;text-align:center;animation:sk-chasingDots-rotate 2s infinite linear}.sk-chasing-dots>div{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:currentColor;border-radius:100%;animation:sk-chasingDots-bounce 2s infinite ease-in-out}.sk-chasing-dots>div:nth-child(2){top:auto;bottom:0;animation-delay:-1s}@keyframes sk-chasingDots-rotate{to{transform:rotate(360deg)}}@keyframes sk-chasingDots-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}.sk-circle{margin:auto;width:100%;height:100%;position:relative}.sk-circle>div{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circle>div:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;background-color:currentColor;border-radius:100%;animation:sk-circle-bounceDelay 1.2s infinite ease-in-out both}.sk-circle>div:nth-child(2){transform:rotate(30deg)}.sk-circle>div:nth-child(3){transform:rotate(60deg)}.sk-circle>div:nth-child(4){transform:rotate(90deg)}.sk-circle>div:nth-child(5){transform:rotate(120deg)}.sk-circle>div:nth-child(6){transform:rotate(150deg)}.sk-circle>div:nth-child(7){transform:rotate(180deg)}.sk-circle>div:nth-child(8){transform:rotate(210deg)}.sk-circle>div:nth-child(9){transform:rotate(240deg)}.sk-circle>div:nth-child(10){transform:rotate(270deg)}.sk-circle>div:nth-child(11){transform:rotate(300deg)}.sk-circle>div:nth-child(12){transform:rotate(330deg)}.sk-circle>div:nth-child(2):before{animation-delay:-1.1s}.sk-circle>div:nth-child(3):before{animation-delay:-1s}.sk-circle>div:nth-child(4):before{animation-delay:-.9s}.sk-circle>div:nth-child(5):before{animation-delay:-.8s}.sk-circle>div:nth-child(6):before{animation-delay:-.7s}.sk-circle>div:nth-child(7):before{animation-delay:-.6s}.sk-circle>div:nth-child(8):before{animation-delay:-.5s}.sk-circle>div:nth-child(9):before{animation-delay:-.4s}.sk-circle>div:nth-child(10):before{animation-delay:-.3s}.sk-circle>div:nth-child(11):before{animation-delay:-.2s}.sk-circle>div:nth-child(12):before{animation-delay:-.1s}@keyframes sk-circle-bounceDelay{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.sk-cube-grid{width:100%;height:100%;margin:auto}.sk-cube-grid>div{width:33%;height:33%;background-color:currentColor;float:left;animation:sk-cubeGrid-scaleDelay 1.3s infinite ease-in-out}.sk-cube-grid>div:nth-child(1){animation-delay:.2s}.sk-cube-grid>div:nth-child(2){animation-delay:.3s}.sk-cube-grid>div:nth-child(3){animation-delay:.4s}.sk-cube-grid>div:nth-child(4){animation-delay:.1s}.sk-cube-grid>div:nth-child(5){animation-delay:.2s}.sk-cube-grid>div:nth-child(6){animation-delay:.3s}.sk-cube-grid>div:nth-child(7){animation-delay:0s}.sk-cube-grid>div:nth-child(8){animation-delay:.1s}.sk-cube-grid>div:nth-child(9){animation-delay:.2s}@keyframes sk-cubeGrid-scaleDelay{0%,70%,to{transform:scaleZ(1)}35%{transform:scale3D(0,0,1)}}.sk-double-bounce{width:100%;height:100%;position:relative;margin:auto}.sk-double-bounce>div{width:100%;height:100%;border-radius:50%;background-color:currentColor;opacity:.6;position:absolute;top:0;left:0;animation:sk-doubleBounce-bounce 2s infinite ease-in-out}.sk-double-bounce>div:nth-child(2){animation-delay:-1s}@keyframes sk-doubleBounce-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}.sk-fading-circle{margin:auto;width:100%;height:100%;position:relative}.sk-fading-circle>div{width:100%;height:100%;position:absolute;left:0;top:0}.sk-fading-circle>div:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;background-color:currentColor;border-radius:100%;animation:sk-fadingCircle-FadeDelay 1.2s infinite ease-in-out both}.sk-fading-circle>div:nth-child(2){transform:rotate(30deg)}.sk-fading-circle>div:nth-child(3){transform:rotate(60deg)}.sk-fading-circle>div:nth-child(4){transform:rotate(90deg)}.sk-fading-circle>div:nth-child(5){transform:rotate(120deg)}.sk-fading-circle>div:nth-child(6){transform:rotate(150deg)}.sk-fading-circle>div:nth-child(7){transform:rotate(180deg)}.sk-fading-circle>div:nth-child(8){transform:rotate(210deg)}.sk-fading-circle>div:nth-child(9){transform:rotate(240deg)}.sk-fading-circle>div:nth-child(10){transform:rotate(270deg)}.sk-fading-circle>div:nth-child(11){transform:rotate(300deg)}.sk-fading-circle>div:nth-child(12){transform:rotate(330deg)}.sk-fading-circle>div:nth-child(2):before{animation-delay:-1.1s}.sk-fading-circle>div:nth-child(3):before{animation-delay:-1s}.sk-fading-circle>div:nth-child(4):before{animation-delay:-.9s}.sk-fading-circle>div:nth-child(5):before{animation-delay:-.8s}.sk-fading-circle>div:nth-child(6):before{animation-delay:-.7s}.sk-fading-circle>div:nth-child(7):before{animation-delay:-.6s}.sk-fading-circle>div:nth-child(8):before{animation-delay:-.5s}.sk-fading-circle>div:nth-child(9):before{animation-delay:-.4s}.sk-fading-circle>div:nth-child(10):before{animation-delay:-.3s}.sk-fading-circle>div:nth-child(11):before{animation-delay:-.2s}.sk-fading-circle>div:nth-child(12):before{animation-delay:-.1s}@keyframes sk-fadingCircle-FadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}.sk-folding-cube{margin:auto;width:100%;height:100%;position:relative;transform:rotate(45deg)}.sk-folding-cube>div{float:left;width:50%;height:50%;position:relative;transform:scale(1.1)}.sk-folding-cube>div:before{content:\"