ng-shimmer-loader
Version:
A shimmer loader component for Angular
93 lines (86 loc) • 6.17 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Input, Component, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class ShimmerLoaderService {
constructor() { }
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: ShimmerLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: ShimmerLoaderService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: ShimmerLoaderService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
class ShimmerLoaderComponent {
width = '100%';
height = '20px';
className = '';
borderRadius = '4px';
baseColor = '#f6f7f8';
highlightColor = '#edeef1';
animationDuration = '1.5s';
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: ShimmerLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: ShimmerLoaderComponent, isStandalone: true, selector: "ng-shimmer-loader", inputs: { width: "width", height: "height", className: "className", borderRadius: "borderRadius", baseColor: "baseColor", highlightColor: "highlightColor", animationDuration: "animationDuration" }, ngImport: i0, template: `
<div
class="ng-shimmer-loader"
[ngClass]="className"
[style.width]="width"
[style.height]="height"
[style.border-radius]="borderRadius"
[style.--base-color]="baseColor"
[style.--highlight-color]="highlightColor"
[style.--animation-duration]="animationDuration"
></div>
`, isInline: true, styles: [".ng-shimmer-loader{position:relative;overflow:hidden;background-color:#f0f0f0}.ng-shimmer-loader:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,#fff0 0,#fff3 20%,#ffffff80 60%,#fff0);animation:shimmer var(--animation-duration, 1.5s) infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.ng-shimmer{display:inline-block;width:100%;height:12px;background-color:#f6f7f8;background-image:linear-gradient(to right,#f6f7f8 0,#edeef1 20%,#f6f7f8 40% 100%);background-position:0 0;background-repeat:no-repeat;background-size:1000px 1000px;animation:shimmerEffect 1s linear infinite forwards}.ng-shimmer.rtl{animation:shimmerEffectRTL 1s linear infinite forwards}@keyframes shimmerEffect{0%{background-position:-1000px 0}to{background-position:1000px 0}}@keyframes shimmerEffectRTL{0%{background-position:1000px 0}to{background-position:-1000px 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: ShimmerLoaderComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-shimmer-loader', imports: [CommonModule], standalone: true, template: `
<div
class="ng-shimmer-loader"
[ngClass]="className"
[style.width]="width"
[style.height]="height"
[style.border-radius]="borderRadius"
[style.--base-color]="baseColor"
[style.--highlight-color]="highlightColor"
[style.--animation-duration]="animationDuration"
></div>
`, styles: [".ng-shimmer-loader{position:relative;overflow:hidden;background-color:#f0f0f0}.ng-shimmer-loader:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,#fff0 0,#fff3 20%,#ffffff80 60%,#fff0);animation:shimmer var(--animation-duration, 1.5s) infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.ng-shimmer{display:inline-block;width:100%;height:12px;background-color:#f6f7f8;background-image:linear-gradient(to right,#f6f7f8 0,#edeef1 20%,#f6f7f8 40% 100%);background-position:0 0;background-repeat:no-repeat;background-size:1000px 1000px;animation:shimmerEffect 1s linear infinite forwards}.ng-shimmer.rtl{animation:shimmerEffectRTL 1s linear infinite forwards}@keyframes shimmerEffect{0%{background-position:-1000px 0}to{background-position:1000px 0}}@keyframes shimmerEffectRTL{0%{background-position:1000px 0}to{background-position:-1000px 0}}\n"] }]
}], propDecorators: { width: [{
type: Input
}], height: [{
type: Input
}], className: [{
type: Input
}], borderRadius: [{
type: Input
}], baseColor: [{
type: Input
}], highlightColor: [{
type: Input
}], animationDuration: [{
type: Input
}] } });
class ShimmerLoaderModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: ShimmerLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.3", ngImport: i0, type: ShimmerLoaderModule, imports: [ShimmerLoaderComponent], exports: [ShimmerLoaderComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: ShimmerLoaderModule, imports: [ShimmerLoaderComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: ShimmerLoaderModule, decorators: [{
type: NgModule,
args: [{
imports: [ShimmerLoaderComponent],
exports: [ShimmerLoaderComponent]
}]
}] });
/*
* Public API Surface of shimmer-loader
*/
/**
* Generated bundle index. Do not edit.
*/
export { ShimmerLoaderComponent, ShimmerLoaderModule, ShimmerLoaderService };
//# sourceMappingURL=ng-shimmer-loader.mjs.map