HTML Attributes

data-ghostly

Set by: <Ghostly> component automatically.

The main activation attribute. When present, all descendant elements become skeleton blocks.

Using without React

Ghostly's CSS works standalone:

<div data-ghostly="shimmer">
  <h2>This becomes a skeleton block</h2>
  <p>So does this</p>
</div>

<script>
  fetch('/api/data').then(() => {
    document.querySelector('[data-ghostly]').removeAttribute('data-ghostly')
  })
</script>

data-ghostly-ignore

Set by: Developer, manually.

Excludes an element and all its children from the skeleton effect.

<div data-ghostly="shimmer">
  <h2>Skeleton block</h2>
  <nav data-ghostly-ignore>
    <a href="/">This stays visible</a>
  </nav>
</div>

Common use cases

• Navigation that should always be visible
• Action buttons (Share, Save, Close)
• Logos and branding
• Fixed action bars

data-ghostly-lines

Set by: Developer, manually.

Controls how many text lines a skeleton element simulates. Overrides the default min-height. Supports values 1 through 8.

<div data-ghostly="shimmer">
  <p data-ghostly-lines="1">Short text</p>
  <p data-ghostly-lines="5">Long paragraph that takes multiple lines</p>
</div>

data-ghostly-ratio

Set by: Developer, manually.

Sets a custom aspect ratio for media elements (images, videos) during skeleton loading.

<div data-ghostly="shimmer">
  <img data-ghostly-ratio="1/1" src="avatar.jpg" alt="Avatar" />
  <img data-ghostly-ratio="4/3" src="photo.jpg" alt="Photo" />
</div>

data-ghostly-smooth

Set by: <Ghostly smooth> automatically.

Enables smooth CSS transitions on descendant elements so that when loading ends, skeleton styles fade out gracefully instead of disappearing instantly.

Transition duration is controlled by --ghostly-transition (default: 0.3s).

<!-- Managed by React component -->
<div data-ghostly="shimmer" data-ghostly-smooth>
  <h2>Fades out smoothly when loading ends</h2>
</div>

aria-busy

Set by: <Ghostly> automatically.

Set to "true" when loading, removed when loaded. Tells assistive technologies the region is updating.

aria-live

Set by: <Ghostly> automatically.

Always set to "polite". Combined with aria-busy, provides complete screen reader support:

1. Loading starts — aria-busy="true" — "region busy"
2. Loading ends — aria-busy removed — screen reader announces new content