Skeleton

A pulsing placeholder for loading content.

import { … } from '@inlaylab/ivorie/skeleton'

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvSkeleton } from '@inlaylab/ivorie/skeleton';

@Component({
  selector: 'demo-skeleton',
  imports: [IvSkeleton],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="w-full max-w-sm space-y-2" aria-busy="true">
      <iv-skeleton class="h-4 w-3/4" />
      <iv-skeleton class="h-4 w-1/2" />
    </div>
  `,
})
export default class SkeletonDemo {}

Installation

CLI

npm

npx ivorie add skeleton

import { … } from '@inlaylab/ivorie/skeleton'

Size it with Tailwind utilities.

Usage

import { IvSkeleton } from '@inlaylab/ivorie/skeleton';

<iv-skeleton class="h-4 w-3/4"></iv-skeleton>

Examples

Card

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvSkeleton } from '@inlaylab/ivorie/skeleton';

@Component({
  selector: 'demo-skeleton-card',
  imports: [IvSkeleton],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="flex items-center gap-4" aria-busy="true">
      <iv-skeleton class="size-12 rounded-full" />
      <div class="space-y-2">
        <iv-skeleton class="h-4 w-48" />
        <iv-skeleton class="h-4 w-32" />
      </div>
    </div>
  `,
})
export default class SkeletonCardDemo {}

API

Every part also accepts class.

iv-skeleton

No inputs besides class.

Accessibility

It has no role and no text, so it is invisible to assistive tech. Mark the loading region with aria-busy="true" on the container.