Shimmer effect in Angular Skeleton

26 Sep 20264 minutes to read

You can use the shimmerEffect property to change animation effect in the Angular Skeleton control. Angular 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 Angular Skeleton.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications'




import { Component } from '@angular/core';

@Component({
imports: [
         
        SkeletonModule
    ],


standalone: true,
    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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/* Represents the styles for loader */
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

#skeleton-list {
    padding-left: 12px;
    padding-top: 7px;
    line-height: inherit;
  }
  
#skeleton-list li {
    list-style: none;
    display: flow-root;
    margin-bottom: 9px;
}
.listProfile {
    float: left;
    margin-right: 15px;
}