ngx-skeleton-loader
Version:
Make beautiful, animated loading skeletons that automatically adapt to your Angular apps
71 lines • 7.54 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: lib/ngx-skeleton-loader.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, isDevMode } from '@angular/core';
import { start, end } from 'perf-marks/marks';
export class NgxSkeletonLoaderComponent {
constructor() {
this.count = 1;
this.appearance = '';
this.animation = 'progress';
this.theme = {};
this.items = [];
}
/**
* @return {?}
*/
ngOnInit() {
start('NgxSkeletonLoader:Rendered');
start('NgxSkeletonLoader:Loaded');
this.items.length = this.count;
/** @type {?} */
const allowedAnimations = ['progress', 'progress-dark', 'pulse', 'false'];
if (allowedAnimations.indexOf(this.animation) === -1) {
// Shows error message only in Development
if (isDevMode()) {
console.error(`\`NgxSkeletonLoaderComponent\` need to receive 'animation' as: ${allowedAnimations.join(', ')}. Forcing default to "progress".`);
}
this.animation = 'progress';
}
}
/**
* @return {?}
*/
ngAfterViewInit() {
end('NgxSkeletonLoader:Rendered');
}
/**
* @return {?}
*/
ngOnDestroy() {
end('NgxSkeletonLoader:Loaded');
}
}
NgxSkeletonLoaderComponent.decorators = [
{ type: 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}}"]
}] }
];
NgxSkeletonLoaderComponent.propDecorators = {
count: [{ type: Input }],
appearance: [{ type: Input }],
animation: [{ type: Input }],
theme: [{ type: Input }]
};
if (false) {
/** @type {?} */
NgxSkeletonLoaderComponent.prototype.count;
/** @type {?} */
NgxSkeletonLoaderComponent.prototype.appearance;
/** @type {?} */
NgxSkeletonLoaderComponent.prototype.animation;
/** @type {?} */
NgxSkeletonLoaderComponent.prototype.theme;
/** @type {?} */
NgxSkeletonLoaderComponent.prototype.items;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXNrZWxldG9uLWxvYWRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtc2tlbGV0b24tbG9hZGVyLyIsInNvdXJjZXMiOlsibGliL25neC1za2VsZXRvbi1sb2FkZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsU0FBUyxFQUE0QixNQUFNLGVBQWUsQ0FBQztBQUM5RixPQUFPLEVBQUUsS0FBSyxFQUFFLEdBQUcsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBTzlDLE1BQU0sT0FBTywwQkFBMEI7SUFMdkM7UUFPRSxVQUFLLEdBQUcsQ0FBQyxDQUFDO1FBR1YsZUFBVSxHQUFrQixFQUFFLENBQUM7UUFHL0IsY0FBUyxHQUFxRCxVQUFVLENBQUM7UUFFaEUsVUFBSyxHQUE0QixFQUFFLENBQUM7UUFFN0MsVUFBSyxHQUFlLEVBQUUsQ0FBQztJQTRCekIsQ0FBQzs7OztJQTFCQyxRQUFRO1FBQ04sS0FBSyxDQUFDLDRCQUE0QixDQUFDLENBQUM7UUFDcEMsS0FBSyxDQUFDLDBCQUEwQixDQUFDLENBQUM7UUFFbEMsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQzs7Y0FDekIsaUJBQWlCLEdBQUcsQ0FBQyxVQUFVLEVBQUUsZUFBZSxFQUFFLE9BQU8sRUFBRSxPQUFPLENBQUM7UUFDekUsSUFBSSxpQkFBaUIsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxFQUFFO1lBQ3BELDBDQUEwQztZQUMxQyxJQUFJLFNBQVMsRUFBRSxFQUFFO2dCQUNmLE9BQU8sQ0FBQyxLQUFLLENBQ1gsa0VBQWtFLGlCQUFpQixDQUFDLElBQUksQ0FDdEYsSUFBSSxDQUNMLGtDQUFrQyxDQUNwQyxDQUFDO2FBQ0g7WUFDRCxJQUFJLENBQUMsU0FBUyxHQUFHLFVBQVUsQ0FBQztTQUM3QjtJQUNILENBQUM7Ozs7SUFFRCxlQUFlO1FBQ2IsR0FBRyxDQUFDLDRCQUE0QixDQUFDLENBQUM7SUFDcEMsQ0FBQzs7OztJQUVELFdBQVc7UUFDVCxHQUFHLENBQUMsMEJBQTBCLENBQUMsQ0FBQztJQUNsQyxDQUFDOzs7WUE1Q0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxxQkFBcUI7Z0JBQy9CLHliQUF5Qzs7YUFFMUM7OztvQkFFRSxLQUFLO3lCQUdMLEtBQUs7d0JBR0wsS0FBSztvQkFHTCxLQUFLOzs7O0lBVE4sMkNBQ1U7O0lBRVYsZ0RBQytCOztJQUUvQiwrQ0FDeUU7O0lBRXpFLDJDQUE2Qzs7SUFFN0MsMkNBQXVCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBpc0Rldk1vZGUsIE9uRGVzdHJveSwgQWZ0ZXJWaWV3SW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgc3RhcnQsIGVuZCB9IGZyb20gJ3BlcmYtbWFya3MvbWFya3MnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZ3gtc2tlbGV0b24tbG9hZGVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL25neC1za2VsZXRvbi1sb2FkZXIuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL25neC1za2VsZXRvbi1sb2FkZXIuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBOZ3hTa2VsZXRvbkxvYWRlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJWaWV3SW5pdCwgT25EZXN0cm95IHtcbiAgQElucHV0KClcbiAgY291bnQgPSAxO1xuXG4gIEBJbnB1dCgpXG4gIGFwcGVhcmFuY2U6ICdjaXJjbGUnIHwgJycgPSAnJztcblxuICBASW5wdXQoKVxuICBhbmltYXRpb246ICdwcm9ncmVzcycgfCAncHJvZ3Jlc3MtZGFyaycgfCAncHVsc2UnIHwgJ2ZhbHNlJyA9ICdwcm9ncmVzcyc7XG5cbiAgQElucHV0KCkgdGhlbWU6IHsgW2s6IHN0cmluZ106IHN0cmluZyB9ID0ge307XG5cbiAgaXRlbXM6IEFycmF5PGFueT4gPSBbXTtcblxuICBuZ09uSW5pdCgpIHtcbiAgICBzdGFydCgnTmd4U2tlbGV0b25Mb2FkZXI6UmVuZGVyZWQnKTtcbiAgICBzdGFydCgnTmd4U2tlbGV0b25Mb2FkZXI6TG9hZGVkJyk7XG5cbiAgICB0aGlzLml0ZW1zLmxlbmd0aCA9IHRoaXMuY291bnQ7XG4gICAgY29uc3QgYWxsb3dlZEFuaW1hdGlvbnMgPSBbJ3Byb2dyZXNzJywgJ3Byb2dyZXNzLWRhcmsnLCAncHVsc2UnLCAnZmFsc2UnXTtcbiAgICBpZiAoYWxsb3dlZEFuaW1hdGlvbnMuaW5kZXhPZih0aGlzLmFuaW1hdGlvbikgPT09IC0xKSB7XG4gICAgICAvLyBTaG93cyBlcnJvciBtZXNzYWdlIG9ubHkgaW4gRGV2ZWxvcG1lbnRcbiAgICAgIGlmIChpc0Rldk1vZGUoKSkge1xuICAgICAgICBjb25zb2xlLmVycm9yKFxuICAgICAgICAgIGBcXGBOZ3hTa2VsZXRvbkxvYWRlckNvbXBvbmVudFxcYCBuZWVkIHRvIHJlY2VpdmUgJ2FuaW1hdGlvbicgYXM6ICR7YWxsb3dlZEFuaW1hdGlvbnMuam9pbihcbiAgICAgICAgICAgICcsICcsXG4gICAgICAgICAgKX0uIEZvcmNpbmcgZGVmYXVsdCB0byBcInByb2dyZXNzXCIuYCxcbiAgICAgICAgKTtcbiAgICAgIH1cbiAgICAgIHRoaXMuYW5pbWF0aW9uID0gJ3Byb2dyZXNzJztcbiAgICB9XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgZW5kKCdOZ3hTa2VsZXRvbkxvYWRlcjpSZW5kZXJlZCcpO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgZW5kKCdOZ3hTa2VsZXRvbkxvYWRlcjpMb2FkZWQnKTtcbiAgfVxufVxuIl19