Skip to content Herbst UI beta

Component

Skeleton

Loading placeholders. Use the base skeleton with any shape, size, and animation, or reach for ready-made presets — text, avatar, button, input, card, list, form, and table — to mirror your real layout while it loads.

Shapes, size & animation 

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

import { HbSkeletonImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-skeleton-shapes',
  imports: [HbSkeletonImports],
  template: `
    <div class="flex w-full max-w-md flex-col gap-4">
      <div class="flex items-center gap-3">
        <hb-skeleton hbShape="circle" hbSize="lg" />
        <div class="flex flex-1 flex-col gap-2">
          <hb-skeleton hbShape="text" hbSize="lg" hbWidth="70%" />
          <hb-skeleton hbShape="text" />
        </div>
      </div>

      <hb-skeleton hbHeight="6rem" hbRounded="lg" />

      <div class="flex items-center gap-3">
        <hb-skeleton hbShape="square" hbSize="md" hbAnimation="wave" />
        <hb-skeleton hbShape="square" hbSize="md" hbAnimation="none" />
        <hb-skeleton hbWidth="8rem" hbHeight="2rem" hbRounded="full" />
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoSkeletonShapesComponent {}

Text, avatar, button & card

List, form & table

API reference

hb-skeleton

PropertyDescriptionTypeDefault
[hbShape] The placeholder form. 'rectangle' | 'circle' | 'square' | 'text' 'rectangle'
[hbSize] A preset size for circle, square, and text shapes. 'xs' | 'sm' | 'md' | 'lg' | 'xl' 'md'
[hbWidth] / [hbHeight] Explicit CSS width and height, overriding the preset dimensions. string ''
[hbRounded] Corner rounding override. 'none' | 'sm' | 'md' | 'lg' | 'full' —
[hbAnimation] The shimmer effect: a pulse, a moving wave, or none. 'pulse' | 'wave' | 'none' 'pulse'

Presets — content

PropertyDescriptionTypeDefault
hb-skeleton-text Lines of text. [hbLines], [hbLastWidth] (the last line), [hbSize], [hbGap]. component hbLines 3, hbLastWidth 60%
hb-skeleton-avatar A circle/square/rounded avatar; [hbText] adds two lines beside it. [hbSize]. component hbShape circle
hb-skeleton-button / hb-skeleton-input A button- or input-shaped placeholder. [hbSize], [hbWidth]. component —
hb-skeleton-card A media area, text lines, and optional footer. [hbMedia], [hbMediaHeight], [hbLines], [hbFooter]. component hbMedia true, hbLines 3

Presets — layouts

PropertyDescriptionTypeDefault
hb-skeleton-list Repeated rows with optional avatar. [hbItems], [hbAvatar], [hbLines]. component hbItems 5, hbAvatar true, hbLines 2
hb-skeleton-form Field rows and an optional submit button. [hbFields], [hbButton]. component hbFields 3, hbButton true
hb-skeleton-table A grid with optional header. [hbRows], [hbColumns], [hbHeader]. component hbRows 5, hbColumns 4, hbHeader true
[hbAnimation] Every preset also accepts hbAnimation, applied to all its parts. 'pulse' | 'wave' | 'none' 'pulse'