Skeleton
Use to show a placeholder while content is loading.
import { Component } from '@angular/core';
import { HlmSkeleton } from '@spartan-ng/helm/skeleton';
@Component({
selector: 'spartan-skeleton-preview',
imports: [HlmSkeleton],
template: `
<div class="flex items-center space-x-4">
<hlm-skeleton class="size-12 rounded-full" />
<div class="space-y-2">
<hlm-skeleton class="h-4 w-[250px]" />
<hlm-skeleton class="h-4 w-[200px]" />
</div>
</div>
`,
})
export class SkeletonPreview {}Installation
npx nx g @spartan-ng/cli:ui skeleton
ng g @spartan-ng/cli:ui skeleton
Usage
import { HlmSkeletonComponent } from '@spartan-ng/helm/skeleton';<hlm-skeleton class="h-[20px] w-[100px] rounded-full" />Helm API
HlmSkeleton
Selector: hlm-skeleton
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
Examples
Card
import { Component } from '@angular/core';
import { HlmSkeleton } from '@spartan-ng/helm/skeleton';
@Component({
selector: 'spartan-skeleton-card',
imports: [HlmSkeleton],
template: `
<div class="flex flex-col space-y-3">
<hlm-skeleton class="h-[125px] w-[250px] rounded-xl" />
<div class="space-y-2">
<hlm-skeleton class="h-4 w-[250px]" />
<hlm-skeleton class="h-4 w-[200px]" />
</div>
</div>
`,
})
export class SkeletonCard {}