@uiowa/spinner/esm2020/lib/loading-bar/loading-bar.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 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']
                }] }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibG9hZGluZy1iYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWlvd2Evc3Bpbm5lci9zcmMvbGliL2xvYWRpbmctYmFyL2xvYWRpbmctYmFyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Vpb3dhL3NwaW5uZXIvc3JjL2xpYi9sb2FkaW5nLWJhci9sb2FkaW5nLWJhci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSx1QkFBdUIsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFROUUsTUFBTSxPQUFPLG1CQUFtQjtJQUM5QixZQUFzQyxJQUFZO1FBQVosU0FBSSxHQUFKLElBQUksQ0FBUTtRQUNoRCxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksSUFBSSxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLElBQUksQ0FBQyxJQUFJLEdBQUcsQ0FBQyxFQUFFO1lBQ25ELElBQUksQ0FBQyxJQUFJLEdBQUcsQ0FBQyxDQUFDO1NBQ2Y7SUFDSCxDQUFDOztpSEFMVSxtQkFBbUIsa0JBQ1AsTUFBTTtxR0FEbEIsbUJBQW1CLG1EQ1JoQyxxZkFrQkE7NEZEVmEsbUJBQW1CO2tCQU4vQixTQUFTOytCQUNFLGFBQWEsbUJBR04sdUJBQXVCLENBQUMsTUFBTTs7MEJBR2xDLFNBQVM7MkJBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQXR0cmlidXRlLCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdsb2FkaW5nLWJhcicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2xvYWRpbmctYmFyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9sb2FkaW5nLWJhci5jb21wb25lbnQuY3NzJ10sXHJcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBMb2FkaW5nQmFyQ29tcG9uZW50IHtcclxuICBjb25zdHJ1Y3RvcihAQXR0cmlidXRlKCdzaXplJykgcHVibGljIHNpemU6IG51bWJlcikge1xyXG4gICAgaWYgKCF0aGlzLnNpemUgfHwgaXNOYU4odGhpcy5zaXplKSB8fCB0aGlzLnNpemUgPCAwKSB7XHJcbiAgICAgIHRoaXMuc2l6ZSA9IDE7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiIsIjxuZy1jb250ZW50PjwvbmctY29udGVudD5cclxuPHNwYW4gY2xhc3M9XCJsb2FkaW5nLWJhcnNcIj5cclxuICA8c3BhblxyXG4gICAgY2xhc3M9XCJsb2FkaW5nLWJhcnMtYmxvY2sgYmxvY2stMVwiXHJcbiAgICBbc3R5bGUuaGVpZ2h0LnJlbV09XCJzaXplXCJcclxuICAgIFtzdHlsZS53aWR0aC5yZW1dPVwic2l6ZSAvIDRcIlxyXG4gID48L3NwYW4+XHJcbiAgPHNwYW5cclxuICAgIGNsYXNzPVwibG9hZGluZy1iYXJzLWJsb2NrIGJsb2NrLTJcIlxyXG4gICAgW3N0eWxlLmhlaWdodC5yZW1dPVwic2l6ZVwiXHJcbiAgICBbc3R5bGUud2lkdGgucmVtXT1cInNpemUgLyA0XCJcclxuICA+PC9zcGFuPlxyXG4gIDxzcGFuXHJcbiAgICBjbGFzcz1cImxvYWRpbmctYmFycy1ibG9jayBibG9jay0zXCJcclxuICAgIFtzdHlsZS5oZWlnaHQucmVtXT1cInNpemVcIlxyXG4gICAgW3N0eWxlLndpZHRoLnJlbV09XCJzaXplIC8gNFwiXHJcbiAgPjwvc3Bhbj5cclxuPC9zcGFuPlxyXG4iXX0=