Shimmer effect in Angular Skeleton component
1 Dec 20223 minutes to read
You can use the shimmerEffect
property to change animation effect in the skeleton control. Skeleton supports Wave
, Pulse
and Fade
effects and by default, the shimmerEffect
is set to Wave
effect.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<ejs-skeleton shape= 'Circle' width= "60px" shimmerEffect= 'Pulse'></ejs-skeleton>`
})
export class AppComponent { }
Below example demonstrates a list with pulse effect skeleton.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<div>
<ul id="skeleton-list" class="e-card">
<li>
<div class='listProfile'>
<ejs-skeleton shape="Circle" width="40px" shimmerEffect='Pulse'></ejs-skeleton>
</div>
<div>
<ejs-skeleton width="60%" height='15px' shimmerEffect='Pulse'></ejs-skeleton><br>
<ejs-skeleton width="40%" height='15px' shimmerEffect='Pulse'></ejs-skeleton>
</div>
</li>
<li>
<div class='listProfile'>
<ejs-skeleton shape="Circle" width="40px" shimmerEffect='Pulse'></ejs-skeleton>
</div>
<div>
<ejs-skeleton width="60%" height='15px' shimmerEffect='Pulse'></ejs-skeleton><br>
<ejs-skeleton width="40%" height='15px' shimmerEffect='Pulse'></ejs-skeleton>
</div>
</li>
</ul>
</div>`
})
export class AppComponent {}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
SkeletonModule
],
declarations: [AppComponent ],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);