Skeleton

Use to show a placeholder while content is loading.

PreviousNext
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

1

Run the CLI

Use the CLI to add the component to your project. 

npx @ngzard/ui@latest add skeleton
1

Add the component files

Create the component directory structure and add the following files to your project.

skeleton.component.ts
skeleton.component.ts
import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';
 
import type { ClassValue } from 'clsx';
 
import { skeletonVariants } from './skeleton.variants';
import { mergeClasses } from '../../shared/utils/utils';
 
@Component({
  selector: 'z-skeleton',
  template: `<div data-slot="skeleton" [class]="classes()"></div>`,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: {
    class: 'block',
  },
  exportAs: 'zSkeleton',
})
export class ZardSkeletonComponent {
  readonly class = input<ClassValue>('');
 
  protected readonly classes = computed(() => mergeClasses(skeletonVariants(), this.class()));
}
skeleton.variants.ts
skeleton.variants.ts
import { cva, type VariantProps } from 'class-variance-authority';
 
export const skeletonVariants = cva('bg-accent animate-pulse rounded-md');
export type ZardSkeletonVariants = VariantProps<typeof skeletonVariants>;

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 {}

API

[z-skeleton] Component

z-skeleton renders a customizable placeholder during data loading to improve perceived performance and prevent layout shifts.

Property Description Type Default
[class] Custom CSS classes string ''