complex

Skeleton

Used to show a placeholder while content is loading.

Preview

A preview of the Skeleton component with interactive controls.

Preview Code
Interactive

Installation

Add the Skeleton component to your project.

Bash
ng g @ng-cn/core:c skeleton

Usage

Import and use the Skeleton component in your Angular application.

Template TypeScript
template.html
<div class="flex items-center space-x-4">
  <Skeleton class="h-12 w-12 rounded-full" />
  <div class="space-y-2">
    <Skeleton class="h-4 w-[250px]" />
    <Skeleton class="h-4 w-[200px]" />
  </div>
</div>

Examples

Explore different variations and use cases for the Skeleton component.

Basic

Preview Code
Interactive

Card

Preview Code
Interactive

API Reference

Props
Prop Type Default Description
class string — Additional CSS classes to apply.