Styles in Blazor Skeleton Component

6 Dec 20221 minute to read

You can customize skeleton component in the below ways.

CssClass

You can customize the style of a Skeleton component by using CssClass. The appearance of Blazor Skeleton can be customized by changing the wave color, background color, width, and height.

RAZOR

@using Syncfusion.Blazor.Notifications

<SfSkeleton Shape=SkeletonType.Circle Width="60px" CssClass="e-customize"></SfSkeleton>

<style>
    .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));
    }
    .e-customize.e-skeleton.e-skeleton-circle{
        background-color: #a8c1f2;
    }
</style>

Visible

You can use the Visible property which defines the visible state of Skeleton.

RAZOR

<SfSkeleton Shape=SkeletonType.Circle Width="60px" Visible=false></SfSkeleton>