ngx-skeleton-loader
Version:
Make beautiful, animated loading skeletons that automatically adapt to your Angular apps
82 lines • 8.04 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';
var NgxSkeletonLoaderComponent = /** @class */ (function () {
function NgxSkeletonLoaderComponent() {
this.count = 1;
this.appearance = '';
this.animation = 'progress';
this.theme = {};
this.items = [];
}
/**
* @return {?}
*/
NgxSkeletonLoaderComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
start('NgxSkeletonLoader:Rendered');
start('NgxSkeletonLoader:Loaded');
this.items.length = this.count;
/** @type {?} */
var 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 {?}
*/
NgxSkeletonLoaderComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
end('NgxSkeletonLoader:Rendered');
};
/**
* @return {?}
*/
NgxSkeletonLoaderComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
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 }]
};
return NgxSkeletonLoaderComponent;
}());
export { NgxSkeletonLoaderComponent };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXNrZWxldG9uLWxvYWRlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtc2tlbGV0b24tbG9hZGVyLyIsInNvdXJjZXMiOlsibGliL25neC1za2VsZXRvbi1sb2FkZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsU0FBUyxFQUE0QixNQUFNLGVBQWUsQ0FBQztBQUM5RixPQUFPLEVBQUUsS0FBSyxFQUFFLEdBQUcsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBRTlDO0lBQUE7UUFPRSxVQUFLLEdBQUcsQ0FBQyxDQUFDO1FBR1YsZUFBVSxHQUFrQixFQUFFLENBQUM7UUFHL0IsY0FBUyxHQUFxRCxVQUFVLENBQUM7UUFFaEUsVUFBSyxHQUE0QixFQUFFLENBQUM7UUFFN0MsVUFBSyxHQUFlLEVBQUUsQ0FBQztJQTRCekIsQ0FBQzs7OztJQTFCQyw2Q0FBUTs7O0lBQVI7UUFDRSxLQUFLLENBQUMsNEJBQTRCLENBQUMsQ0FBQztRQUNwQyxLQUFLLENBQUMsMEJBQTBCLENBQUMsQ0FBQztRQUVsQyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDOztZQUN6QixpQkFBaUIsR0FBRyxDQUFDLFVBQVUsRUFBRSxlQUFlLEVBQUUsT0FBTyxFQUFFLE9BQU8sQ0FBQztRQUN6RSxJQUFJLGlCQUFpQixDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQUU7WUFDcEQsMENBQTBDO1lBQzFDLElBQUksU0FBUyxFQUFFLEVBQUU7Z0JBQ2YsT0FBTyxDQUFDLEtBQUssQ0FDWCxrRUFBa0UsaUJBQWlCLENBQUMsSUFBSSxDQUN0RixJQUFJLENBQ0wsdUNBQWtDLENBQ3BDLENBQUM7YUFDSDtZQUNELElBQUksQ0FBQyxTQUFTLEdBQUcsVUFBVSxDQUFDO1NBQzdCO0lBQ0gsQ0FBQzs7OztJQUVELG9EQUFlOzs7SUFBZjtRQUNFLEdBQUcsQ0FBQyw0QkFBNEIsQ0FBQyxDQUFDO0lBQ3BDLENBQUM7Ozs7SUFFRCxnREFBVzs7O0lBQVg7UUFDRSxHQUFHLENBQUMsMEJBQTBCLENBQUMsQ0FBQztJQUNsQyxDQUFDOztnQkE1Q0YsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxxQkFBcUI7b0JBQy9CLHliQUF5Qzs7aUJBRTFDOzs7d0JBRUUsS0FBSzs2QkFHTCxLQUFLOzRCQUdMLEtBQUs7d0JBR0wsS0FBSzs7SUE4QlIsaUNBQUM7Q0FBQSxBQTdDRCxJQTZDQztTQXhDWSwwQkFBMEI7OztJQUNyQywyQ0FDVTs7SUFFVixnREFDK0I7O0lBRS9CLCtDQUN5RTs7SUFFekUsMkNBQTZDOztJQUU3QywyQ0FBdUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIGlzRGV2TW9kZSwgT25EZXN0cm95LCBBZnRlclZpZXdJbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBzdGFydCwgZW5kIH0gZnJvbSAncGVyZi1tYXJrcy9tYXJrcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25neC1za2VsZXRvbi1sb2FkZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vbmd4LXNrZWxldG9uLWxvYWRlci5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbmd4LXNrZWxldG9uLWxvYWRlci5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIE5neFNrZWxldG9uTG9hZGVyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0LCBPbkRlc3Ryb3kge1xuICBASW5wdXQoKVxuICBjb3VudCA9IDE7XG5cbiAgQElucHV0KClcbiAgYXBwZWFyYW5jZTogJ2NpcmNsZScgfCAnJyA9ICcnO1xuXG4gIEBJbnB1dCgpXG4gIGFuaW1hdGlvbjogJ3Byb2dyZXNzJyB8ICdwcm9ncmVzcy1kYXJrJyB8ICdwdWxzZScgfCAnZmFsc2UnID0gJ3Byb2dyZXNzJztcblxuICBASW5wdXQoKSB0aGVtZTogeyBbazogc3RyaW5nXTogc3RyaW5nIH0gPSB7fTtcblxuICBpdGVtczogQXJyYXk8YW55PiA9IFtdO1xuXG4gIG5nT25Jbml0KCkge1xuICAgIHN0YXJ0KCdOZ3hTa2VsZXRvbkxvYWRlcjpSZW5kZXJlZCcpO1xuICAgIHN0YXJ0KCdOZ3hTa2VsZXRvbkxvYWRlcjpMb2FkZWQnKTtcblxuICAgIHRoaXMuaXRlbXMubGVuZ3RoID0gdGhpcy5jb3VudDtcbiAgICBjb25zdCBhbGxvd2VkQW5pbWF0aW9ucyA9IFsncHJvZ3Jlc3MnLCAncHJvZ3Jlc3MtZGFyaycsICdwdWxzZScsICdmYWxzZSddO1xuICAgIGlmIChhbGxvd2VkQW5pbWF0aW9ucy5pbmRleE9mKHRoaXMuYW5pbWF0aW9uKSA9PT0gLTEpIHtcbiAgICAgIC8vIFNob3dzIGVycm9yIG1lc3NhZ2Ugb25seSBpbiBEZXZlbG9wbWVudFxuICAgICAgaWYgKGlzRGV2TW9kZSgpKSB7XG4gICAgICAgIGNvbnNvbGUuZXJyb3IoXG4gICAgICAgICAgYFxcYE5neFNrZWxldG9uTG9hZGVyQ29tcG9uZW50XFxgIG5lZWQgdG8gcmVjZWl2ZSAnYW5pbWF0aW9uJyBhczogJHthbGxvd2VkQW5pbWF0aW9ucy5qb2luKFxuICAgICAgICAgICAgJywgJyxcbiAgICAgICAgICApfS4gRm9yY2luZyBkZWZhdWx0IHRvIFwicHJvZ3Jlc3NcIi5gLFxuICAgICAgICApO1xuICAgICAgfVxuICAgICAgdGhpcy5hbmltYXRpb24gPSAncHJvZ3Jlc3MnO1xuICAgIH1cbiAgfVxuXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICBlbmQoJ05neFNrZWxldG9uTG9hZGVyOlJlbmRlcmVkJyk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICBlbmQoJ05neFNrZWxldG9uTG9hZGVyOkxvYWRlZCcpO1xuICB9XG59XG4iXX0=