@uiowa/spinner/esm2020/lib/action-spinner/action-spinner.component.mjs

(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.

import { Component, Attribute, ChangeDetectionStrategy } from '@angular/core';
import * as i0 from "@angular/core";
export 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']
                }] }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWN0aW9uLXNwaW5uZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWlvd2Evc3Bpbm5lci9zcmMvbGliL2FjdGlvbi1zcGlubmVyL2FjdGlvbi1zcGlubmVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Vpb3dhL3NwaW5uZXIvc3JjL2xpYi9hY3Rpb24tc3Bpbm5lci9hY3Rpb24tc3Bpbm5lci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSx1QkFBdUIsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFROUUsTUFBTSxPQUFPLHNCQUFzQjtJQUNqQyxZQUFzQyxJQUFZO1FBQVosU0FBSSxHQUFKLElBQUksQ0FBUTtRQUNoRCxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksSUFBSSxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLElBQUksQ0FBQyxJQUFJLEdBQUcsQ0FBQyxFQUFFO1lBQ25ELElBQUksQ0FBQyxJQUFJLEdBQUcsQ0FBQyxDQUFDO1NBQ2Y7SUFDSCxDQUFDOztvSEFMVSxzQkFBc0Isa0JBQ1YsTUFBTTt3R0FEbEIsc0JBQXNCLHNEQ1JuQywwbkJBa0JBOzRGRFZhLHNCQUFzQjtrQkFObEMsU0FBUzsrQkFDRSxnQkFBZ0IsbUJBR1QsdUJBQXVCLENBQUMsTUFBTTs7MEJBR2xDLFNBQVM7MkJBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQXR0cmlidXRlLCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdhY3Rpb24tc3Bpbm5lcicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2FjdGlvbi1zcGlubmVyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9hY3Rpb24tc3Bpbm5lci5jb21wb25lbnQuY3NzJ10sXHJcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBBY3Rpb25TcGlubmVyQ29tcG9uZW50IHtcclxuICBjb25zdHJ1Y3RvcihAQXR0cmlidXRlKCdzaXplJykgcHVibGljIHNpemU6IG51bWJlcikge1xyXG4gICAgaWYgKCF0aGlzLnNpemUgfHwgaXNOYU4odGhpcy5zaXplKSB8fCB0aGlzLnNpemUgPCAwKSB7XHJcbiAgICAgIHRoaXMuc2l6ZSA9IDE7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiIsIjxkaXZcclxuICBjbGFzcz1cImZhZGluZy1jaXJjbGUtc3Bpbm5lclwiXHJcbiAgW3N0eWxlLndpZHRoLnJlbV09XCJzaXplXCJcclxuICBbc3R5bGUuaGVpZ2h0LnJlbV09XCJzaXplXCJcclxuPlxyXG4gIDxkaXYgY2xhc3M9XCJjaXJjbGUxIGNpcmNsZVwiPjwvZGl2PlxyXG4gIDxkaXYgY2xhc3M9XCJjaXJjbGUyIGNpcmNsZVwiPjwvZGl2PlxyXG4gIDxkaXYgY2xhc3M9XCJjaXJjbGUzIGNpcmNsZVwiPjwvZGl2PlxyXG4gIDxkaXYgY2xhc3M9XCJjaXJjbGU0IGNpcmNsZVwiPjwvZGl2PlxyXG4gIDxkaXYgY2xhc3M9XCJjaXJjbGU1IGNpcmNsZVwiPjwvZGl2PlxyXG4gIDxkaXYgY2xhc3M9XCJjaXJjbGU2IGNpcmNsZVwiPjwvZGl2PlxyXG4gIDxkaXYgY2xhc3M9XCJjaXJjbGU3IGNpcmNsZVwiPjwvZGl2PlxyXG4gIDxkaXYgY2xhc3M9XCJjaXJjbGU4IGNpcmNsZVwiPjwvZGl2PlxyXG4gIDxkaXYgY2xhc3M9XCJjaXJjbGU5IGNpcmNsZVwiPjwvZGl2PlxyXG4gIDxkaXYgY2xhc3M9XCJjaXJjbGUxMCBjaXJjbGVcIj48L2Rpdj5cclxuICA8ZGl2IGNsYXNzPVwiY2lyY2xlMTEgY2lyY2xlXCI+PC9kaXY+XHJcbiAgPGRpdiBjbGFzcz1cImNpcmNsZTEyIGNpcmNsZVwiPjwvZGl2PlxyXG48L2Rpdj5cclxuIl19