@uiowa/spinner
Version:
(action-spinner) rotating circle spinner, used for actions such as button clicks. (loading-bar) beeping blocks, used for loading promises. (uiowa-ring) rotating golden and black spinner, used as loading indicator.
116 lines (107 loc) • 16.6 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, Attribute, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
class ActionSpinnerComponent {
constructor(size) {
this.size = size;
if (!this.size || isNaN(this.size) || this.size < 0) {
this.size = 1;
}
}
}
ActionSpinnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSpinnerComponent, deps: [{ token: 'size', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
ActionSpinnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ActionSpinnerComponent, selector: "action-spinner", ngImport: i0, template: "<div\r\n class=\"fading-circle-spinner\"\r\n [style.width.rem]=\"size\"\r\n [style.height.rem]=\"size\"\r\n>\r\n <div class=\"circle1 circle\"></div>\r\n <div class=\"circle2 circle\"></div>\r\n <div class=\"circle3 circle\"></div>\r\n <div class=\"circle4 circle\"></div>\r\n <div class=\"circle5 circle\"></div>\r\n <div class=\"circle6 circle\"></div>\r\n <div class=\"circle7 circle\"></div>\r\n <div class=\"circle8 circle\"></div>\r\n <div class=\"circle9 circle\"></div>\r\n <div class=\"circle10 circle\"></div>\r\n <div class=\"circle11 circle\"></div>\r\n <div class=\"circle12 circle\"></div>\r\n</div>\r\n", styles: [".fading-circle-spinner{position:relative;display:inline-block}.fading-circle-spinner .circle{position:absolute;top:0;left:0;width:100%;height:100%}.fading-circle-spinner .circle:before{display:block;margin:0 auto;width:15%;height:15%;border-radius:100%;background-color:currentColor;content:\"\";animation:sk-circleFadeDelay 1.2s infinite ease-in-out both}.fading-circle-spinner .circle2{transform:rotate(30deg)}.fading-circle-spinner .circle3{transform:rotate(60deg)}.fading-circle-spinner .circle4{transform:rotate(90deg)}.fading-circle-spinner .circle5{transform:rotate(120deg)}.fading-circle-spinner .circle6{transform:rotate(150deg)}.fading-circle-spinner .circle7{transform:rotate(180deg)}.fading-circle-spinner .circle8{transform:rotate(210deg)}.fading-circle-spinner .circle9{transform:rotate(240deg)}.fading-circle-spinner .circle10{transform:rotate(270deg)}.fading-circle-spinner .circle11{transform:rotate(300deg)}.fading-circle-spinner .circle12{transform:rotate(330deg)}.fading-circle-spinner .circle2:before{animation-delay:-1.1s}.fading-circle-spinner .circle3:before{animation-delay:-1s}.fading-circle-spinner .circle4:before{animation-delay:-.9s}.fading-circle-spinner .circle5:before{animation-delay:-.8s}.fading-circle-spinner .circle6:before{animation-delay:-.7s}.fading-circle-spinner .circle7:before{animation-delay:-.6s}.fading-circle-spinner .circle8:before{animation-delay:-.5s}.fading-circle-spinner .circle9:before{animation-delay:-.4s}.fading-circle-spinner .circle10:before{animation-delay:-.3s}.fading-circle-spinner .circle11:before{animation-delay:-.2s}.fading-circle-spinner .circle12:before{animation-delay:-.1s}@keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ActionSpinnerComponent, decorators: [{
type: Component,
args: [{ selector: 'action-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"fading-circle-spinner\"\r\n [style.width.rem]=\"size\"\r\n [style.height.rem]=\"size\"\r\n>\r\n <div class=\"circle1 circle\"></div>\r\n <div class=\"circle2 circle\"></div>\r\n <div class=\"circle3 circle\"></div>\r\n <div class=\"circle4 circle\"></div>\r\n <div class=\"circle5 circle\"></div>\r\n <div class=\"circle6 circle\"></div>\r\n <div class=\"circle7 circle\"></div>\r\n <div class=\"circle8 circle\"></div>\r\n <div class=\"circle9 circle\"></div>\r\n <div class=\"circle10 circle\"></div>\r\n <div class=\"circle11 circle\"></div>\r\n <div class=\"circle12 circle\"></div>\r\n</div>\r\n", styles: [".fading-circle-spinner{position:relative;display:inline-block}.fading-circle-spinner .circle{position:absolute;top:0;left:0;width:100%;height:100%}.fading-circle-spinner .circle:before{display:block;margin:0 auto;width:15%;height:15%;border-radius:100%;background-color:currentColor;content:\"\";animation:sk-circleFadeDelay 1.2s infinite ease-in-out both}.fading-circle-spinner .circle2{transform:rotate(30deg)}.fading-circle-spinner .circle3{transform:rotate(60deg)}.fading-circle-spinner .circle4{transform:rotate(90deg)}.fading-circle-spinner .circle5{transform:rotate(120deg)}.fading-circle-spinner .circle6{transform:rotate(150deg)}.fading-circle-spinner .circle7{transform:rotate(180deg)}.fading-circle-spinner .circle8{transform:rotate(210deg)}.fading-circle-spinner .circle9{transform:rotate(240deg)}.fading-circle-spinner .circle10{transform:rotate(270deg)}.fading-circle-spinner .circle11{transform:rotate(300deg)}.fading-circle-spinner .circle12{transform:rotate(330deg)}.fading-circle-spinner .circle2:before{animation-delay:-1.1s}.fading-circle-spinner .circle3:before{animation-delay:-1s}.fading-circle-spinner .circle4:before{animation-delay:-.9s}.fading-circle-spinner .circle5:before{animation-delay:-.8s}.fading-circle-spinner .circle6:before{animation-delay:-.7s}.fading-circle-spinner .circle7:before{animation-delay:-.6s}.fading-circle-spinner .circle8:before{animation-delay:-.5s}.fading-circle-spinner .circle9:before{animation-delay:-.4s}.fading-circle-spinner .circle10:before{animation-delay:-.3s}.fading-circle-spinner .circle11:before{animation-delay:-.2s}.fading-circle-spinner .circle12:before{animation-delay:-.1s}@keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}\n"] }]
}], ctorParameters: function () {
return [{ type: undefined, decorators: [{
type: Attribute,
args: ['size']
}] }];
} });
class LoadingBarComponent {
constructor(size) {
this.size = size;
if (!this.size || isNaN(this.size) || this.size < 0) {
this.size = 1;
}
}
}
LoadingBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoadingBarComponent, deps: [{ token: 'size', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
LoadingBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LoadingBarComponent, selector: "loading-bar", ngImport: i0, template: "<ng-content></ng-content>\r\n<span class=\"loading-bars\">\r\n <span\r\n class=\"loading-bars-block block-1\"\r\n [style.height.rem]=\"size\"\r\n [style.width.rem]=\"size / 4\"\r\n ></span>\r\n <span\r\n class=\"loading-bars-block block-2\"\r\n [style.height.rem]=\"size\"\r\n [style.width.rem]=\"size / 4\"\r\n ></span>\r\n <span\r\n class=\"loading-bars-block block-3\"\r\n [style.height.rem]=\"size\"\r\n [style.width.rem]=\"size / 4\"\r\n ></span>\r\n</span>\r\n", styles: [".loading-bars{display:inline-block;height:100%;vertical-align:middle;position:relative;margin:auto}.loading-bars-block{background-color:#fff;border:1px solid #000000;float:left;margin-left:1px;opacity:.1;animation-name:bounceG;-o-animation-name:bounceG;-ms-animation-name:bounceG;-webkit-animation-name:bounceG;-moz-animation-name:bounceG;animation-duration:1.5s;-o-animation-duration:1.5s;-ms-animation-duration:1.5s;-webkit-animation-duration:1.5s;-moz-animation-duration:1.5s;animation-iteration-count:infinite;-o-animation-iteration-count:infinite;-ms-animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;animation-direction:normal;-o-animation-direction:normal;-ms-animation-direction:normal;-webkit-animation-direction:normal;-moz-animation-direction:normal;transform:scale(.7);-o-transform:scale(.7);-ms-transform:scale(.7);-webkit-transform:scale(.7);-moz-transform:scale(.7)}.block-1{display:inline-block;animation-delay:.45s;-o-animation-delay:.45s;-ms-animation-delay:.45s;-webkit-animation-delay:.45s;-moz-animation-delay:.45s}.block-2{display:inline-block;animation-delay:.6s;-o-animation-delay:.6s;-ms-animation-delay:.6s;-webkit-animation-delay:.6s;-moz-animation-delay:.6s}.block-3{display:inline-block;animation-delay:.75s;-o-animation-delay:.75s;-ms-animation-delay:.75s;-webkit-animation-delay:.75s;-moz-animation-delay:.75s}@keyframes bounceG{0%{transform:scale(1.2);opacity:1}to{transform:scale(.7);opacity:.1}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoadingBarComponent, decorators: [{
type: Component,
args: [{ selector: 'loading-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\r\n<span class=\"loading-bars\">\r\n <span\r\n class=\"loading-bars-block block-1\"\r\n [style.height.rem]=\"size\"\r\n [style.width.rem]=\"size / 4\"\r\n ></span>\r\n <span\r\n class=\"loading-bars-block block-2\"\r\n [style.height.rem]=\"size\"\r\n [style.width.rem]=\"size / 4\"\r\n ></span>\r\n <span\r\n class=\"loading-bars-block block-3\"\r\n [style.height.rem]=\"size\"\r\n [style.width.rem]=\"size / 4\"\r\n ></span>\r\n</span>\r\n", styles: [".loading-bars{display:inline-block;height:100%;vertical-align:middle;position:relative;margin:auto}.loading-bars-block{background-color:#fff;border:1px solid #000000;float:left;margin-left:1px;opacity:.1;animation-name:bounceG;-o-animation-name:bounceG;-ms-animation-name:bounceG;-webkit-animation-name:bounceG;-moz-animation-name:bounceG;animation-duration:1.5s;-o-animation-duration:1.5s;-ms-animation-duration:1.5s;-webkit-animation-duration:1.5s;-moz-animation-duration:1.5s;animation-iteration-count:infinite;-o-animation-iteration-count:infinite;-ms-animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;animation-direction:normal;-o-animation-direction:normal;-ms-animation-direction:normal;-webkit-animation-direction:normal;-moz-animation-direction:normal;transform:scale(.7);-o-transform:scale(.7);-ms-transform:scale(.7);-webkit-transform:scale(.7);-moz-transform:scale(.7)}.block-1{display:inline-block;animation-delay:.45s;-o-animation-delay:.45s;-ms-animation-delay:.45s;-webkit-animation-delay:.45s;-moz-animation-delay:.45s}.block-2{display:inline-block;animation-delay:.6s;-o-animation-delay:.6s;-ms-animation-delay:.6s;-webkit-animation-delay:.6s;-moz-animation-delay:.6s}.block-3{display:inline-block;animation-delay:.75s;-o-animation-delay:.75s;-ms-animation-delay:.75s;-webkit-animation-delay:.75s;-moz-animation-delay:.75s}@keyframes bounceG{0%{transform:scale(1.2);opacity:1}to{transform:scale(.7);opacity:.1}}\n"] }]
}], ctorParameters: function () {
return [{ type: undefined, decorators: [{
type: Attribute,
args: ['size']
}] }];
} });
class UiowaRingComponent {
constructor(size) {
this.size = size;
if (!this.size || isNaN(this.size) || this.size < 0) {
this.size = 4;
}
}
}
UiowaRingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UiowaRingComponent, deps: [{ token: 'size', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
UiowaRingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: UiowaRingComponent, selector: "uiowa-ring", ngImport: i0, template: "<div\r\n class=\"ring\"\r\n [style.height.rem]=\"size\"\r\n [style.width.rem]=\"size\"\r\n [style.border-width.rem]=\"size / 4\"\r\n></div>\r\n", styles: [".ring{border-radius:50%;border-color:#000000 #ffcd00;border-style:solid;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UiowaRingComponent, decorators: [{
type: Component,
args: [{ selector: 'uiowa-ring', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ring\"\r\n [style.height.rem]=\"size\"\r\n [style.width.rem]=\"size\"\r\n [style.border-width.rem]=\"size / 4\"\r\n></div>\r\n", styles: [".ring{border-radius:50%;border-color:#000000 #ffcd00;border-style:solid;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
}], ctorParameters: function () {
return [{ type: undefined, decorators: [{
type: Attribute,
args: ['size']
}] }];
} });
class LoadingPlaceholderComponent {
constructor() { }
ngOnInit() { }
}
LoadingPlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoadingPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
LoadingPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LoadingPlaceholderComponent, selector: "loading-placeholder", ngImport: i0, template: `<div class="placeholder-item"></div>`, isInline: true, styles: [".placeholder-item{box-shadow:0 4px 10px #21212126;position:relative;overflow:hidden;height:100%}.placeholder-item:before{content:\"\";display:block;position:absolute;left:-200px;top:0;height:100%;width:200px;background:linear-gradient(to right,transparent 0%,#e8e8e8 50%,transparent 100%);animation:load 1s cubic-bezier(.4,0,.2,1) infinite}@keyframes load{0%{left:-200px}to{left:100%}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoadingPlaceholderComponent, decorators: [{
type: Component,
args: [{ selector: 'loading-placeholder', template: `<div class="placeholder-item"></div>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".placeholder-item{box-shadow:0 4px 10px #21212126;position:relative;overflow:hidden;height:100%}.placeholder-item:before{content:\"\";display:block;position:absolute;left:-200px;top:0;height:100%;width:200px;background:linear-gradient(to right,transparent 0%,#e8e8e8 50%,transparent 100%);animation:load 1s cubic-bezier(.4,0,.2,1) infinite}@keyframes load{0%{left:-200px}to{left:100%}}\n"] }]
}], ctorParameters: function () { return []; } });
class SpinnerModule {
}
SpinnerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SpinnerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
SpinnerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SpinnerModule, declarations: [ActionSpinnerComponent,
LoadingBarComponent,
UiowaRingComponent,
LoadingPlaceholderComponent], imports: [CommonModule], exports: [ActionSpinnerComponent,
LoadingBarComponent,
UiowaRingComponent,
LoadingPlaceholderComponent] });
SpinnerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SpinnerModule, imports: [[CommonModule]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SpinnerModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule],
declarations: [
ActionSpinnerComponent,
LoadingBarComponent,
UiowaRingComponent,
LoadingPlaceholderComponent,
],
exports: [
ActionSpinnerComponent,
LoadingBarComponent,
UiowaRingComponent,
LoadingPlaceholderComponent,
],
}]
}] });
/*
* Public API Surface of spinner
*/
/**
* Generated bundle index. Do not edit.
*/
export { ActionSpinnerComponent, LoadingBarComponent, LoadingPlaceholderComponent, SpinnerModule, UiowaRingComponent };
//# sourceMappingURL=uiowa-spinner.mjs.map