Skeleton

Use to show a placeholder while content is loading.

import { Component } from '@angular/core';
import { HlmSkeletonImports } from '@spartan-ng/helm/skeleton';

@Component({
	selector: 'spartan-skeleton-preview',
	imports: [HlmSkeletonImports],
	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

ng g @spartan-ng/cli:ui skeleton

Usage

import { HlmSkeletonImports } from '@spartan-ng/helm/skeleton';

<hlm-skeleton class="h-[20px] w-[100px] rounded-full" />

Examples

Card

import { Component } from '@angular/core';

import { HlmSkeletonImports } from '@spartan-ng/helm/skeleton';

@Component({
	selector: 'spartan-skeleton-card',
	imports: [HlmSkeletonImports],
	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 {}

Helm API

HlmSkeleton

Selector: [hlmSkeleton],hlm-skeleton

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

Slider

Sidebar

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.