Run the CLI
Use the CLI to add the component to your project.
npx @ngzard/ui@latest add skeletonSkeleton
Use to show a placeholder while content is loading.
import { Component } from '@angular/core';
import { ZardSkeletonComponent } from '../skeleton.component';
@Component({
selector: 'z-demo-skeleton-default',
imports: [ZardSkeletonComponent],
standalone: true,
template: `
<div class="flex items-center space-x-4">
<z-skeleton class="h-12 w-12 rounded-full" />
<div class="space-y-2">
<z-skeleton class="h-4 w-[250px]" />
<z-skeleton class="h-4 w-[200px]" />
</div>
</div>
`,
})
export class ZardDemoSkeletonDefaultComponent {}
Installation
Add the component files
Create the component directory structure and add the following files to your project.
Examples
default
import { Component } from '@angular/core';
import { ZardSkeletonComponent } from '../skeleton.component';
@Component({
selector: 'z-demo-skeleton-default',
imports: [ZardSkeletonComponent],
standalone: true,
template: `
<div class="flex items-center space-x-4">
<z-skeleton class="h-12 w-12 rounded-full" />
<div class="space-y-2">
<z-skeleton class="h-4 w-[250px]" />
<z-skeleton class="h-4 w-[200px]" />
</div>
</div>
`,
})
export class ZardDemoSkeletonDefaultComponent {}
card
import { Component } from '@angular/core';
import { ZardSkeletonComponent } from '../skeleton.component';
@Component({
selector: 'z-demo-skeleton-card',
imports: [ZardSkeletonComponent],
standalone: true,
template: `
<div class="flex flex-col space-y-3">
<z-skeleton class="rounded-xll h-[125px] w-[250px]" />
<div class="space-y-2">
<z-skeleton class="h-4 w-[250px]" />
<z-skeleton class="h-4 w-[200px]" />
</div>
</div>
`,
})
export class ZardDemoSkeletonCardComponent {}