Skeleton Loading

Content-shaped placeholder.

html

<div class="lod-skl-stage" data-shape="card">
  
  <div class="lod-skl-body" aria-hidden="true">
    <span class="lod-skl-avatar"></span>
    <span class="lod-skl-bar lod-skl-bar--w"></span>
    <span class="lod-skl-bar lod-skl-bar--m"></span>
  </div>
  <p role="status" aria-live="polite">Loading profile&hellip;</p>
  
  
</div>
<style>
.lod-skl-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 13px system-ui, sans-serif; color: #241430aa; }
.lod-skl-avatar { display: block; width: 44px; height: 44px; border-radius: 999px; background: #24143014; margin-bottom: 10px; }
[data-shape="card"] .lod-skl-avatar { border-radius: 8px; width: 100%; height: 60px; }
.lod-skl-bar { display: block; height: 11px; background: #24143014; border-radius: 6px; margin-bottom: 8px; }
.lod-skl-bar--w { width: 100%; } .lod-skl-bar--m { width: 55%; }
.lod-skl-loaded { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.lod-skl-photo { width: 44px; height: 44px; border-radius: 999px; margin-bottom: 8px; }
.lod-skl-loaded p { margin: 0; color: #241430aa; font-size: 12px; }
</style>

tailwind

<div class="w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-sm text-[#241430]/70" data-shape="card">
  
  <div aria-hidden="true">
    <span class="tw-skl-avatar block w-11 h-11 rounded-full bg-[#24143014] mb-2.5"></span>
    <span class="block h-[11px] bg-[#24143014] rounded-md mb-2 w-full"></span>
    <span class="block h-[11px] bg-[#24143014] rounded-md mb-2 w-[55%]"></span>
  </div>
  <p role="status" aria-live="polite">Loading profile&hellip;</p>
  
  
</div>
<style>
[data-shape="card"] .tw-skl-avatar { border-radius: 8px; width: 100%; height: 60px; }
</style>

react

export function SkeletonLoading({
  loaded = false,
  shape = "card",
  accent = "#F5C2E0",
}) {
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430aa" }}>
      {!loaded && (
        <>
          <div aria-hidden="true">
            <span style={{ display: "block", width: shape === "card" ? "100%" : 44, height: shape === "card" ? 60 : 44, borderRadius: shape === "card" ? 8 : 999, background: "#24143014", marginBottom: 10 }} />
            <span style={{ display: "block", height: 11, background: "#24143014", borderRadius: 6, marginBottom: 8, width: "100%" }} />
            <span style={{ display: "block", height: 11, background: "#24143014", borderRadius: 6, marginBottom: 8, width: "55%" }} />
          </div>
          <p role="status" aria-live="polite">Loading profile&hellip;</p>
        </>
      )}
      {loaded && (
        <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 2 }}>
          <span style={{ width: 44, height: 44, borderRadius: 999, marginBottom: 8, background: accent }} />
          <strong>Amara Cole</strong>
          <p style={{ margin: 0, color: "#241430aa", fontSize: 12 }}>Product designer</p>
        </div>
      )}
    </div>
  );
}