Skeleton

The Skeleton component provides lightweight loading placeholders for content-heavy interfaces.

Ignix Lite skeletons support multiple shapes and semantic loading states using native HTML attributes.

---

Text Skeleton

Preview

Code

<span
  role="status"
  aria-busy="true"
  aria-label="loading text"
  data-shape="text"
></span>

---

Rectangle Skeleton

Preview

Code

<span
  role="status"
  aria-busy="true"
  aria-label="loading rectangle"
  data-shape="rect"
></span>

---

Circle Skeleton

Preview

Code

<span
  role="status"
  aria-busy="true"
  aria-label="loading avatar"
  data-shape="circle"
></span>

---

Multiple Text Lines

Preview

Code

<span
  role="status"
  aria-busy="true"
  aria-label="loading line"
  data-shape="text"
></span>

<span
  role="status"
  aria-busy="true"
  aria-label="loading line"
  data-shape="text"
></span>

<span
  role="status"
  aria-busy="true"
  aria-label="loading line"
  data-shape="text"
></span>

Usage

Preview

Loading Banner

Code

<span
  role="status"
  aria-busy="true"
  aria-label="loading banner"
  data-shape="rect"
></span>

---

Attributes

Attribute	Type	Description
data-shape	'text' | 'rect' | 'circle'	Applies skeleton shape
aria-busy	boolean	Indicates loading state
role	string	Accessibility status role