@simfyz/ngx-loading-spinner
Version:
Customizable loading spinner for Angular 2+ with Ivy support
301 lines (286 loc) • 32.9 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ViewContainerRef, input, Component, Injectable, ElementRef, Renderer2, model, effect, DestroyRef, Directive, makeEnvironmentProviders } from '@angular/core';
import { NgStyle, NgClass, NgTemplateOutlet } from '@angular/common';
const ANIMATION_TYPES = {
dualCircle: 'dualCircle',
scalingBars: 'scalingBars',
chasingDots: 'chasingDots',
bouncingDots: 'bouncingDots',
fadingCircle: 'fadingCircle',
halfCircle: 'halfCircle',
cubeGrid: 'cubeGrid'
};
class NgxLoadingSpinnerConfig {
constructor(config) {
this.animationType = config.animationType;
this.backdropColor = config.backdropColor;
this.spinnerColor = config.spinnerColor;
this.spinnerPosition = config.spinnerPosition;
this.backdropBorderRadius = config.backdropBorderRadius;
this.spinnerSize = config.spinnerSize;
this.spinnerFontSize = config.spinnerFontSize;
}
}
class NgxLoadingSpinnerComponent {
constructor() {
this.vcRef = inject(ViewContainerRef);
this.config = input(null);
this.template = input(null);
this.ANIMATION_TYPES = ANIMATION_TYPES;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", type: NgxLoadingSpinnerComponent, isStandalone: true, selector: "ngx-loading-spinner", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
<div class="backdrop"
[ngStyle]="{'background-color': config()?.backdropColor, 'border-radius': config()?.backdropBorderRadius}"></div>
<div class="wrapper"
[ngClass]="[config()?.spinnerPosition, config()?.spinnerSize]"
[ngStyle]="{'color': config()?.spinnerColor, 'font-size': config()?.spinnerFontSize}">
@if (!template()) {
<!-- DUAL CIRCLE SPINNER -->
@if (config()?.animationType === ANIMATION_TYPES.dualCircle) {
<div class="dual-circle"></div>
}
<!-- SCALING BARS -->
@if (config()?.animationType === ANIMATION_TYPES.scalingBars) {
<div class="scaling-bars"></div>
}
<!-- CHASING DOTS -->
@if (config()?.animationType === ANIMATION_TYPES.chasingDots) {
<div class="chasing-dots"></div>
}
<!-- BOUNCING DOTS -->
@if (config()?.animationType === ANIMATION_TYPES.bouncingDots) {
<div class="bouncing-dots">
<div class="bounce-1"></div>
<div class="bounce-2"></div>
<div class="bounce-3"></div>
</div>
}
<!-- FADING CIRCLE -->
@if (config()?.animationType === ANIMATION_TYPES.fadingCircle) {
<div class="fading-circle">
<div class="sk-circle1 sk-circle"></div>
<div class="sk-circle2 sk-circle"></div>
<div class="sk-circle3 sk-circle"></div>
<div class="sk-circle4 sk-circle"></div>
<div class="sk-circle5 sk-circle"></div>
<div class="sk-circle6 sk-circle"></div>
<div class="sk-circle7 sk-circle"></div>
<div class="sk-circle8 sk-circle"></div>
<div class="sk-circle9 sk-circle"></div>
<div class="sk-circle10 sk-circle"></div>
<div class="sk-circle11 sk-circle"></div>
<div class="sk-circle12 sk-circle"></div>
</div>
}
<!-- HALF CIRCLE -->
@if (config()?.animationType === ANIMATION_TYPES.halfCircle) {
<div class="half-circle"></div>
}
<!-- CUBIC GRID -->
@if (config()?.animationType === ANIMATION_TYPES.cubeGrid) {
<div class="sk-cube-grid cube-grid">
<div class="sk-cube sk-cube1" [ngStyle]="{'background-color': config()?.spinnerColor}"></div>
<div class="sk-cube sk-cube2" [ngStyle]="{'background-color': config()?.spinnerColor}"></div>
<div class="sk-cube sk-cube3" [ngStyle]="{'background-color': config()?.spinnerColor}"></div>
<div class="sk-cube sk-cube4" [ngStyle]="{'background-color': config()?.spinnerColor}"></div>
<div class="sk-cube sk-cube5" [ngStyle]="{'background-color': config()?.spinnerColor}"></div>
<div class="sk-cube sk-cube6" [ngStyle]="{'background-color': config()?.spinnerColor}"></div>
<div class="sk-cube sk-cube7" [ngStyle]="{'background-color': config()?.spinnerColor}"></div>
<div class="sk-cube sk-cube8" [ngStyle]="{'background-color': config()?.spinnerColor}"></div>
<div class="sk-cube sk-cube9" [ngStyle]="{'background-color': config()?.spinnerColor}"></div>
</div>
}
}
<ng-container *ngTemplateOutlet="template()"></ng-container>
</div>
`, isInline: true, styles: [".backdrop{background-color:#0000004d;position:absolute;inset:0;z-index:2000}.wrapper{position:absolute;z-index:2001}.left{top:50%;left:5px;transform:translateY(-50%)}.right{top:50%;right:5px;transform:translateY(-50%)}.top{top:5px;left:50%;transform:translate(-50%)}.bottom{bottom:5px;left:50%;transform:translate(-50%)}.top-right{top:5px;right:5px}.top-left{top:5px;left:5px}.bottom-right{bottom:5px;right:5px}.bottom-left{bottom:5px;left:5px}.center{top:50%;left:50%;transform:translate(-50%,-50%)}.xs{font-size:.5rem}.sm{font-size:1rem}.md{font-size:1.5rem}.lg{font-size:2rem}.xl{font-size:2.5rem}.dual-circle{display:inline-block}.dual-circle:after{content:\" \";display:block;width:1.5em;height:1.5em;border-radius:50%;border:.1em solid currentColor;border-color:currentColor transparent currentColor transparent;animation:dual-cricle-anim 1.2s linear infinite}@keyframes dual-cricle-anim{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.center .scaling-bars,.top .scaling-bars,.bottom .scaling-bars{left:0}.left .scaling-bars,.top-left .scaling-bars,.top-bottom .scaling-bars{left:1.5em}.right .scaling-bars,.top-right .scaling-bars,.bottom-right .scaling-bars{right:1.5em}.scaling-bars,.scaling-bars:before,.scaling-bars:after{background:currentColor;-webkit-animation:scaling-bars-anim 1s infinite ease-in-out;animation:scaling-bars-anim 1s infinite ease-in-out;width:1em;height:2em}.scaling-bars{color:currentColor;text-indent:-9999em;position:relative;font-size:.5em;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation-delay:-.16s;animation-delay:-.16s}.scaling-bars:before,.scaling-bars:after{position:absolute;top:0;content:\"\"}.scaling-bars:before{left:-1.5em;-webkit-animation-delay:-.32s;animation-delay:-.32s}.scaling-bars:after{left:1.5em}@-webkit-keyframes scaling-bars-anim{0%,80%,to{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}@keyframes scaling-bars-anim{0%,80%,to{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}.chasing-dots{color:currentColor;font-size:1.5em;text-indent:-9999em;overflow:hidden;width:1em;height:1em;border-radius:50%;position:relative;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load6 1.7s infinite ease,round 1.7s infinite ease;animation:load6 1.7s infinite ease,round 1.7s infinite ease}@-webkit-keyframes load6{0%{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}5%,95%{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}10%,59%{box-shadow:0 -.83em 0 -.4em,-.087em -.825em 0 -.42em,-.173em -.812em 0 -.44em,-.256em -.789em 0 -.46em,-.297em -.775em 0 -.477em}20%{box-shadow:0 -.83em 0 -.4em,-.338em -.758em 0 -.42em,-.555em -.617em 0 -.44em,-.671em -.488em 0 -.46em,-.749em -.34em 0 -.477em}38%{box-shadow:0 -.83em 0 -.4em,-.377em -.74em 0 -.42em,-.645em -.522em 0 -.44em,-.775em -.297em 0 -.46em,-.82em -.09em 0 -.477em}to{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}}@keyframes load6{0%{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}5%,95%{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}10%,59%{box-shadow:0 -.83em 0 -.4em,-.087em -.825em 0 -.42em,-.173em -.812em 0 -.44em,-.256em -.789em 0 -.46em,-.297em -.775em 0 -.477em}20%{box-shadow:0 -.83em 0 -.4em,-.338em -.758em 0 -.42em,-.555em -.617em 0 -.44em,-.671em -.488em 0 -.46em,-.749em -.34em 0 -.477em}38%{box-shadow:0 -.83em 0 -.4em,-.377em -.74em 0 -.42em,-.645em -.522em 0 -.44em,-.775em -.297em 0 -.46em,-.82em -.09em 0 -.477em}to{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}}@-webkit-keyframes round{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes round{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.bouncing-dots{font-size:inherit;text-align:center}.bouncing-dots>div{width:1em;height:1em;background-color:currentColor;border-radius:100%;display:inline-block;-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.bouncing-dots .bounce-1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.bouncing-dots .bounce-2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes sk-bouncedelay{0%,80%,to{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes sk-bouncedelay{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}.fading-circle{font-size:inherit;width:2em;height:2em;position:relative}.fading-circle .sk-circle{width:100%;height:100%;position:absolute;left:0;top:0}.fading-circle .sk-circle:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;background-color:currentColor;border-radius:100%;-webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;animation:sk-circleFadeDelay 1.2s infinite ease-in-out both}.fading-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.fading-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.fading-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fading-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.fading-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.fading-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fading-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.fading-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.fading-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fading-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.fading-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.fading-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.fading-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.fading-circle .sk-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.fading-circle .sk-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.fading-circle .sk-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.fading-circle .sk-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.fading-circle .sk-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.fading-circle .sk-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.fading-circle .sk-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.fading-circle .sk-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.fading-circle .sk-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}@keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}.half-circle{width:2em;height:2em;display:inline-block;border:.2em solid transparent;border-left-color:currentColor;border-top-color:currentColor;animation:rotate .6s infinite linear;border-radius:50%}@keyframes rotate{to{transform:rotate(1turn)}}.sk-cube-grid{width:2em;height:2em}.sk-cube-grid .sk-cube{width:33%;height:33%;float:left;-webkit-animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out;animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out}.sk-cube-grid .sk-cube1{-webkit-animation-delay:.2s;animation-delay:.2s}.sk-cube-grid .sk-cube2{-webkit-animation-delay:.3s;animation-delay:.3s}.sk-cube-grid .sk-cube3{-webkit-animation-delay:.4s;animation-delay:.4s}.sk-cube-grid .sk-cube4{-webkit-animation-delay:.1s;animation-delay:.1s}.sk-cube-grid .sk-cube5{-webkit-animation-delay:.2s;animation-delay:.2s}.sk-cube-grid .sk-cube6{-webkit-animation-delay:.3s;animation-delay:.3s}.sk-cube-grid .sk-cube7{-webkit-animation-delay:0s;animation-delay:0s}.sk-cube-grid .sk-cube8{-webkit-animation-delay:.1s;animation-delay:.1s}.sk-cube-grid .sk-cube9{-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes sk-cubeGridScaleDelay{0%,70%,to{-webkit-transform:scale3D(1,1,1);transform:scaleZ(1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}@keyframes sk-cubeGridScaleDelay{0%,70%,to{-webkit-transform:scale3D(1,1,1);transform:scaleZ(1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxLoadingSpinnerComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-loading-spinner', template: `
<div class="backdrop"
[ngStyle]="{'background-color': config()?.backdropColor, 'border-radius': config()?.backdropBorderRadius}"></div>
<div class="wrapper"
[ngClass]="[config()?.spinnerPosition, config()?.spinnerSize]"
[ngStyle]="{'color': config()?.spinnerColor, 'font-size': config()?.spinnerFontSize}">
@if (!template()) {
<!-- DUAL CIRCLE SPINNER -->
@if (config()?.animationType === ANIMATION_TYPES.dualCircle) {
<div class="dual-circle"></div>
}
<!-- SCALING BARS -->
@if (config()?.animationType === ANIMATION_TYPES.scalingBars) {
<div class="scaling-bars"></div>
}
<!-- CHASING DOTS -->
@if (config()?.animationType === ANIMATION_TYPES.chasingDots) {
<div class="chasing-dots"></div>
}
<!-- BOUNCING DOTS -->
@if (config()?.animationType === ANIMATION_TYPES.bouncingDots) {
<div class="bouncing-dots">
<div class="bounce-1"></div>
<div class="bounce-2"></div>
<div class="bounce-3"></div>
</div>
}
<!-- FADING CIRCLE -->
@if (config()?.animationType === ANIMATION_TYPES.fadingCircle) {
<div class="fading-circle">
<div class="sk-circle1 sk-circle"></div>
<div class="sk-circle2 sk-circle"></div>
<div class="sk-circle3 sk-circle"></div>
<div class="sk-circle4 sk-circle"></div>
<div class="sk-circle5 sk-circle"></div>
<div class="sk-circle6 sk-circle"></div>
<div class="sk-circle7 sk-circle"></div>
<div class="sk-circle8 sk-circle"></div>
<div class="sk-circle9 sk-circle"></div>
<div class="sk-circle10 sk-circle"></div>
<div class="sk-circle11 sk-circle"></div>
<div class="sk-circle12 sk-circle"></div>
</div>
}
<!-- HALF CIRCLE -->
@if (config()?.animationType === ANIMATION_TYPES.halfCircle) {
<div class="half-circle"></div>
}
<!-- CUBIC GRID -->
@if (config()?.animationType === ANIMATION_TYPES.cubeGrid) {
<div class="sk-cube-grid cube-grid">
<div class="sk-cube sk-cube1" [ngStyle]="{'background-color': config()?.spinnerColor}"></div>
<div class="sk-cube sk-cube2" [ngStyle]="{'background-color': config()?.spinnerColor}"></div>
<div class="sk-cube sk-cube3" [ngStyle]="{'background-color': config()?.spinnerColor}"></div>
<div class="sk-cube sk-cube4" [ngStyle]="{'background-color': config()?.spinnerColor}"></div>
<div class="sk-cube sk-cube5" [ngStyle]="{'background-color': config()?.spinnerColor}"></div>
<div class="sk-cube sk-cube6" [ngStyle]="{'background-color': config()?.spinnerColor}"></div>
<div class="sk-cube sk-cube7" [ngStyle]="{'background-color': config()?.spinnerColor}"></div>
<div class="sk-cube sk-cube8" [ngStyle]="{'background-color': config()?.spinnerColor}"></div>
<div class="sk-cube sk-cube9" [ngStyle]="{'background-color': config()?.spinnerColor}"></div>
</div>
}
}
<ng-container *ngTemplateOutlet="template()"></ng-container>
</div>
`, imports: [NgStyle, NgClass, NgTemplateOutlet], styles: [".backdrop{background-color:#0000004d;position:absolute;inset:0;z-index:2000}.wrapper{position:absolute;z-index:2001}.left{top:50%;left:5px;transform:translateY(-50%)}.right{top:50%;right:5px;transform:translateY(-50%)}.top{top:5px;left:50%;transform:translate(-50%)}.bottom{bottom:5px;left:50%;transform:translate(-50%)}.top-right{top:5px;right:5px}.top-left{top:5px;left:5px}.bottom-right{bottom:5px;right:5px}.bottom-left{bottom:5px;left:5px}.center{top:50%;left:50%;transform:translate(-50%,-50%)}.xs{font-size:.5rem}.sm{font-size:1rem}.md{font-size:1.5rem}.lg{font-size:2rem}.xl{font-size:2.5rem}.dual-circle{display:inline-block}.dual-circle:after{content:\" \";display:block;width:1.5em;height:1.5em;border-radius:50%;border:.1em solid currentColor;border-color:currentColor transparent currentColor transparent;animation:dual-cricle-anim 1.2s linear infinite}@keyframes dual-cricle-anim{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.center .scaling-bars,.top .scaling-bars,.bottom .scaling-bars{left:0}.left .scaling-bars,.top-left .scaling-bars,.top-bottom .scaling-bars{left:1.5em}.right .scaling-bars,.top-right .scaling-bars,.bottom-right .scaling-bars{right:1.5em}.scaling-bars,.scaling-bars:before,.scaling-bars:after{background:currentColor;-webkit-animation:scaling-bars-anim 1s infinite ease-in-out;animation:scaling-bars-anim 1s infinite ease-in-out;width:1em;height:2em}.scaling-bars{color:currentColor;text-indent:-9999em;position:relative;font-size:.5em;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation-delay:-.16s;animation-delay:-.16s}.scaling-bars:before,.scaling-bars:after{position:absolute;top:0;content:\"\"}.scaling-bars:before{left:-1.5em;-webkit-animation-delay:-.32s;animation-delay:-.32s}.scaling-bars:after{left:1.5em}@-webkit-keyframes scaling-bars-anim{0%,80%,to{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}@keyframes scaling-bars-anim{0%,80%,to{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}.chasing-dots{color:currentColor;font-size:1.5em;text-indent:-9999em;overflow:hidden;width:1em;height:1em;border-radius:50%;position:relative;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:load6 1.7s infinite ease,round 1.7s infinite ease;animation:load6 1.7s infinite ease,round 1.7s infinite ease}@-webkit-keyframes load6{0%{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}5%,95%{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}10%,59%{box-shadow:0 -.83em 0 -.4em,-.087em -.825em 0 -.42em,-.173em -.812em 0 -.44em,-.256em -.789em 0 -.46em,-.297em -.775em 0 -.477em}20%{box-shadow:0 -.83em 0 -.4em,-.338em -.758em 0 -.42em,-.555em -.617em 0 -.44em,-.671em -.488em 0 -.46em,-.749em -.34em 0 -.477em}38%{box-shadow:0 -.83em 0 -.4em,-.377em -.74em 0 -.42em,-.645em -.522em 0 -.44em,-.775em -.297em 0 -.46em,-.82em -.09em 0 -.477em}to{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}}@keyframes load6{0%{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}5%,95%{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}10%,59%{box-shadow:0 -.83em 0 -.4em,-.087em -.825em 0 -.42em,-.173em -.812em 0 -.44em,-.256em -.789em 0 -.46em,-.297em -.775em 0 -.477em}20%{box-shadow:0 -.83em 0 -.4em,-.338em -.758em 0 -.42em,-.555em -.617em 0 -.44em,-.671em -.488em 0 -.46em,-.749em -.34em 0 -.477em}38%{box-shadow:0 -.83em 0 -.4em,-.377em -.74em 0 -.42em,-.645em -.522em 0 -.44em,-.775em -.297em 0 -.46em,-.82em -.09em 0 -.477em}to{box-shadow:0 -.83em 0 -.4em,0 -.83em 0 -.42em,0 -.83em 0 -.44em,0 -.83em 0 -.46em,0 -.83em 0 -.477em}}@-webkit-keyframes round{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes round{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.bouncing-dots{font-size:inherit;text-align:center}.bouncing-dots>div{width:1em;height:1em;background-color:currentColor;border-radius:100%;display:inline-block;-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.bouncing-dots .bounce-1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.bouncing-dots .bounce-2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes sk-bouncedelay{0%,80%,to{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes sk-bouncedelay{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}.fading-circle{font-size:inherit;width:2em;height:2em;position:relative}.fading-circle .sk-circle{width:100%;height:100%;position:absolute;left:0;top:0}.fading-circle .sk-circle:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;background-color:currentColor;border-radius:100%;-webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;animation:sk-circleFadeDelay 1.2s infinite ease-in-out both}.fading-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.fading-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.fading-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fading-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.fading-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.fading-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fading-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.fading-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.fading-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fading-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.fading-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.fading-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.fading-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.fading-circle .sk-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.fading-circle .sk-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.fading-circle .sk-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.fading-circle .sk-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.fading-circle .sk-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.fading-circle .sk-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.fading-circle .sk-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.fading-circle .sk-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.fading-circle .sk-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}@keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}.half-circle{width:2em;height:2em;display:inline-block;border:.2em solid transparent;border-left-color:currentColor;border-top-color:currentColor;animation:rotate .6s infinite linear;border-radius:50%}@keyframes rotate{to{transform:rotate(1turn)}}.sk-cube-grid{width:2em;height:2em}.sk-cube-grid .sk-cube{width:33%;height:33%;float:left;-webkit-animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out;animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out}.sk-cube-grid .sk-cube1{-webkit-animation-delay:.2s;animation-delay:.2s}.sk-cube-grid .sk-cube2{-webkit-animation-delay:.3s;animation-delay:.3s}.sk-cube-grid .sk-cube3{-webkit-animation-delay:.4s;animation-delay:.4s}.sk-cube-grid .sk-cube4{-webkit-animation-delay:.1s;animation-delay:.1s}.sk-cube-grid .sk-cube5{-webkit-animation-delay:.2s;animation-delay:.2s}.sk-cube-grid .sk-cube6{-webkit-animation-delay:.3s;animation-delay:.3s}.sk-cube-grid .sk-cube7{-webkit-animation-delay:0s;animation-delay:0s}.sk-cube-grid .sk-cube8{-webkit-animation-delay:.1s;animation-delay:.1s}.sk-cube-grid .sk-cube9{-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes sk-cubeGridScaleDelay{0%,70%,to{-webkit-transform:scale3D(1,1,1);transform:scaleZ(1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}@keyframes sk-cubeGridScaleDelay{0%,70%,to{-webkit-transform:scale3D(1,1,1);transform:scaleZ(1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}\n"] }]
}] });
const findIndex = function (arr, item) {
for (let i = 0; i < arr.length; i++) {
if (arr[i] === item) {
return i;
}
}
return -1;
};
const objectValues = function (obj) {
let values = [];
for (let item in obj) {
if (obj.hasOwnProperty(item)) {
values.push(obj[item]);
}
}
return values;
};
class NgxLoadingSpinnerConfigService {
constructor() {
this.loadingConfig = inject('loadingConfig', { optional: true });
this.defaultConfig = new NgxLoadingSpinnerConfig({
animationType: this.loadingConfig?.animationType || ANIMATION_TYPES.fadingCircle,
backdropColor: this.loadingConfig?.backdropColor || 'rgba(0, 0, 0, 0.3)',
spinnerColor: this.loadingConfig?.spinnerColor || '#fff',
spinnerPosition: this.loadingConfig?.spinnerPosition || 'center',
backdropBorderRadius: this.loadingConfig?.backdropBorderRadius || '0',
spinnerSize: this.loadingConfig?.spinnerSize || 'md',
spinnerFontSize: this?.loadingConfig?.spinnerFontSize || ''
});
}
normalizeConfigs(config) {
if (!config) {
config = this.defaultConfig;
return config;
}
if (config.spinnerSize === '' && config.spinnerFontSize === '') {
config.spinnerFontSize = '1rem';
}
for (const option in this.defaultConfig) {
// @ts-ignore
if (!config[option]) {
// @ts-ignore
config[option] = this.defaultConfig[option];
}
}
if (findIndex(objectValues(ANIMATION_TYPES), config['animationType']) === -1) {
config['animationType'] = ANIMATION_TYPES.fadingCircle;
}
return config;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxLoadingSpinnerConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxLoadingSpinnerConfigService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxLoadingSpinnerConfigService, decorators: [{
type: Injectable
}], ctorParameters: () => [] });
class NgxLoadingSpinnerDirective {
constructor() {
this.el = inject(ElementRef);
this.vcRef = inject(ViewContainerRef);
this.renderer = inject(Renderer2);
this.configService = inject(NgxLoadingSpinnerConfigService);
this.show = input(false, { alias: 'ngx-loading' });
this.config = model({});
this.template = input(null);
effect(() => {
if (this.show()) {
this.createSpinner();
}
else {
this.destroySpinner();
}
});
inject(DestroyRef).onDestroy(() => this.destroySpinner());
this.setPosition();
}
setPosition() {
const elPosition = this.el.nativeElement.style.position;
if (elPosition === 'relative' || elPosition === 'absolute') {
return;
}
this.el.nativeElement.style.position = 'relative';
}
createSpinner() {
this.spinnerComponentRef = this.vcRef.createComponent(NgxLoadingSpinnerComponent);
const config = this.configService.normalizeConfigs(this.config());
this.spinnerComponentRef.setInput('config', config);
this.spinnerComponentRef.setInput('template', this.template());
this.renderer.appendChild(this.vcRef.element.nativeElement, this.spinnerComponentRef.injector.get(NgxLoadingSpinnerComponent).vcRef.element.nativeElement);
}
destroySpinner() {
if (this.spinnerComponentRef) {
this.spinnerComponentRef.destroy();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxLoadingSpinnerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.1", type: NgxLoadingSpinnerDirective, isStandalone: true, selector: "[ngx-loading]", inputs: { show: { classPropertyName: "show", publicName: "ngx-loading", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange" }, providers: [NgxLoadingSpinnerConfigService], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: NgxLoadingSpinnerDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngx-loading]',
providers: [NgxLoadingSpinnerConfigService]
}]
}], ctorParameters: () => [] });
function provideNgxLoadingSpinner(globalConfig) {
return makeEnvironmentProviders([
NgxLoadingSpinnerConfigService,
{ provide: 'loadingConfig', useValue: globalConfig }
]);
}
/*
* Public API Surface of ngx-loading-spinner
*/
/**
* Generated bundle index. Do not edit.
*/
export { ANIMATION_TYPES, NgxLoadingSpinnerConfig, NgxLoadingSpinnerDirective, provideNgxLoadingSpinner };
//# sourceMappingURL=simfyz-ngx-loading-spinner.mjs.map