Styles in Angular Skeleton component
27 Sep 20232 minutes to read
You can customize skeleton control in the below ways.
cssClass
You can customize the style of a Skeleton control by using cssClass
. The appearance of Angular Skeleton can be customized by changing the wave color, background color, width, and height. For detailed information, refer index.css
file below.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<ejs-skeleton shape= 'Circle' width= "60px" cssClass= "e-customize"></ejs-skeleton>`
})
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';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
/* Represents the styles for shimmer-wave */
.e-customize.e-skeleton.e-shimmer-wave::after{
background-image: linear-gradient(90deg, transparent calc(50% - 100px),
rgb(30 128 234 / 50%) 50%,
transparent calc(50% + 100px));
}
/* Represents the background-color for skeleton-circle */
.e-customize.e-skeleton.e-skeleton-circle{
background-color: #a8c1f2;
}
Visible
You can use the visible
property which defines the visible state of Skeleton.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<ejs-skeleton shape= 'Circle' width= "60px" [visible]='false'></ejs-skeleton>`
})
export class AppComponent { }