ngx-skeleton-loader
Version:
Make beautiful, animated loading skeletons that automatically adapt to your Angular apps
2 lines • 3.41 kB
JavaScript
!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("@angular/core"),require("perf-marks/marks"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-skeleton-loader",["exports","@angular/core","perf-marks/marks","@angular/common"],r):r((e=e||self)["ngx-skeleton-loader"]={},e.ng.core,e.marks,e.ng.common)}(this,(function(e,r,o,n){"use strict";var a=function(){function e(){this.count=1,this.appearance="",this.animation="progress",this.theme={},this.items=[]}return e.prototype.ngOnInit=function(){o.start("NgxSkeletonLoader:Rendered"),o.start("NgxSkeletonLoader:Loaded"),this.items.length=this.count;var e=["progress","progress-dark","pulse","false"];-1===e.indexOf(this.animation)&&(r.isDevMode()&&console.error("`NgxSkeletonLoaderComponent` need to receive 'animation' as: "+e.join(", ")+'. Forcing default to "progress".'),this.animation="progress")},e.prototype.ngAfterViewInit=function(){o.end("NgxSkeletonLoader:Rendered")},e.prototype.ngOnDestroy=function(){o.end("NgxSkeletonLoader:Loaded")},e.decorators=[{type:r.Component,args:[{selector:"ngx-skeleton-loader",template:'<span\n *ngFor="let item of items"\n class="loader"\n aria-busy="true"\n aria-valuemin="0"\n aria-valuemax="100"\n aria-valuetext="Loading..."\n role="progressbar"\n tabindex="0"\n [ngClass]="{\n circle: appearance === \'circle\',\n progress: animation === \'progress\',\n \'progress-dark\': animation === \'progress-dark\',\n pulse: animation === \'pulse\'\n }"\n [ngStyle]="theme"\n>\n</span>\n',styles:[".loader{box-sizing:border-box;overflow:hidden;position:relative;background:no-repeat #eff1f6;border-radius:4px;width:100%;height:20px;display:inline-block;margin-bottom:10px;will-change:transform}.loader:after,.loader:before{box-sizing:border-box}.loader.circle{width:40px;height:40px;margin:5px;border-radius:50%}.loader.progress,.loader.progress-dark{-webkit-animation:2s cubic-bezier(.4,0,.2,1) infinite progress;animation:2s cubic-bezier(.4,0,.2,1) infinite progress;background-size:200px 100%}.loader.progress{background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0))}.loader.progress-dark{background-image:linear-gradient(90deg,transparent,rgba(0,0,0,.2),transparent)}.loader.pulse{-webkit-animation:1.5s cubic-bezier(.4,0,.2,1) infinite pulse;animation:1.5s cubic-bezier(.4,0,.2,1) infinite pulse;-webkit-animation-delay:.5s;animation-delay:.5s}@media (prefers-reduced-motion:reduce){.loader.progress,.loader.progress-dark,.loader.pulse{-webkit-animation:none;animation:none}.loader.progress,.loader.progress-dark{background-image:none}}@-webkit-keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@-webkit-keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}"]}]}],e.propDecorators={count:[{type:r.Input}],appearance:[{type:r.Input}],animation:[{type:r.Input}],theme:[{type:r.Input}]},e}();var i=function(){function e(){}return e.decorators=[{type:r.NgModule,args:[{declarations:[a],imports:[n.CommonModule],exports:[a]}]}],e}();e.NgxSkeletonLoaderComponent=a,e.NgxSkeletonLoaderModule=i,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ngx-skeleton-loader.umd.min.js.map