Spartans get ready! v1 is coming!

We are very close to our first stable release. Expect more announcements in the coming weeks. v1 was made possible by our partner Zerops.

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

npx nx 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: hlm-skeleton

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

Slider

Sidebar