Angular

Use boneyard in any Angular 14+ app. Standalone component — no module needed. Same CLI, same pixel-perfect skeletons.

Quick start

1. Install

bash
npm install boneyard-js

2. Add the component

app.component.ts
import { Component } from '@angular/core'
import { SkeletonComponent } from 'boneyard-js/angular'
import './bones/registry'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SkeletonComponent],
  template: `
    <boneyard-skeleton name="blog-card" [loading]="isLoading">
      <app-blog-card />
    </boneyard-skeleton>
  `
})
export class AppComponent {
  isLoading = true
}

3. Generate bones

bash
npx boneyard-js build

Auto-detects your Angular dev server and captures all named skeletons.

4. Import the registry

ts
// Add once in your app entry (e.g. main.ts)
import './bones/registry'

This import is required.Without it, skeletons won't render — the component needs the registry to resolve bone data by name.

Inputs
InputTypeDefaultDescription
loadingbooleanfalseShow skeleton or children
namestring—Resolve bones from registry by name
initialBonesResponsiveBones—Pass bones directly (overrides registry)
colorstringrgba(0,0,0,0.08)Bone color in light mode
darkColorstringrgba(255,255,255,0.06)Bone color in dark mode
animate'pulse' | 'shimmer' | 'solid'pulseAnimation style (also accepts true/false)
staggernumber | booleanfalseStagger delay between bones in ms (true = 80ms)
transitionnumber | booleanfalseFade out duration in ms when loading ends (true = 300ms)
boneClassstring—CSS class applied to each bone element
cssClassstring—CSS class on the container
snapshotConfigSnapshotConfig—Controls bone extraction during CLI capture
Content projection
SelectorDescription
(default)Your real component — shown when not loading
[fallback]Shown when loading but no bones are available
[fixture]Mock content for CLI capture (dev only)
html
<boneyard-skeleton name="dashboard" [loading]="isLoading">
  <!-- Default: your real component -->
  <app-dashboard [data]="data" />

  <!-- Fixture: mock content for CLI bone capture -->
  <app-dashboard fixture [data]="mockData" />

  <!-- Fallback: shown if no bones generated yet -->
  <p fallback>Loading...</p>
</boneyard-skeleton>
Dark mode

Auto-detects via .dark class on <html> or any parent element (Tailwind convention), and prefers-color-scheme media query. Uses darkColor when dark mode is active.

Animations
ValueEffect
'pulse'Fades a lighter overlay in and out (1.8s cycle)
'shimmer'Sweeps a gradient highlight across each bone (2.4s cycle)
'solid'Static — no animation
true / falsetrue = pulse, false = solid
Global defaults

Set defaults for all skeletons with configureBoneyard():

typescript
import { configureBoneyard } from 'boneyard-js/angular'

configureBoneyard({
  color: '#e5e5e5',
  darkColor: 'rgba(255,255,255,0.08)',
  animate: 'shimmer',
})

Per-component inputs override global defaults.

Config file

See Install → Config file for the full boneyard.config.json reference. Works with all frameworks.

Next steps