Partial Loading

Some content loaded while other content remains pending.

header

half loaded — the rest streams in as it becomes ready

html

<div class="lod-par-stage" data-loaded="half">
  <div class="lod-par-block lod-par-block--header" style="background:#BFD9F2;">header</div>
  <div class="lod-par-block lod-par-block--body" aria-hidden="true">pending</div>
  <div class="lod-par-block lod-par-block--footer" aria-hidden="true">pending</div>
  <p role="status" aria-live="polite" class="lod-par-caption">half loaded &mdash; the rest streams in as it becomes ready</p>
</div>
<style>
.lod-par-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 12px system-ui, sans-serif; color: #241430aa; }
.lod-par-block { height: 34px; border-radius: 8px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(45deg, #24143010 0 8px, transparent 8px 16px); color: #241430; font-weight: 600; }
[data-loaded="header-only"] .lod-par-block--header,
[data-loaded="half"] .lod-par-block--header,
[data-loaded="half"] .lod-par-block--body,
[data-loaded="most"] .lod-par-block--header,
[data-loaded="most"] .lod-par-block--body,
[data-loaded="most"] .lod-par-block--footer { background: none; }
[data-loaded="half"] .lod-par-block--footer { background: repeating-linear-gradient(45deg, #24143010 0 8px, transparent 8px 16px); }
.lod-par-caption { margin: 6px 0 0; text-transform: capitalize; }
</style>

tailwind

<div class="w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-xs text-[#241430]/70" data-loaded="half">
  <div class="tw-par-header h-[34px] rounded-lg mb-2 flex items-center justify-center font-semibold text-[#241430]" style="background:#BFD9F2;">header</div>
  <div aria-hidden="true" class="tw-par-body h-[34px] rounded-lg mb-2 flex items-center justify-center font-semibold text-[#241430]" style="background:repeating-linear-gradient(45deg,#24143010 0 8px,transparent 8px 16px);">pending</div>
  <div aria-hidden="true" class="tw-par-footer h-[34px] rounded-lg mb-2 flex items-center justify-center font-semibold text-[#241430]" style="background:repeating-linear-gradient(45deg,#24143010 0 8px,transparent 8px 16px);">pending</div>
  <p role="status" aria-live="polite" class="mt-1.5 capitalize">half loaded &mdash; the rest streams in as it becomes ready</p>
</div>
<style>
[data-loaded="half"] .tw-par-body,
[data-loaded="most"] .tw-par-body,
[data-loaded="most"] .tw-par-footer { background: none !important; }
</style>

react

export function PartialLoading({
  loadedPortion = "half",
  showLabels = true,
  accent = "#BFD9F2",
}) {
  const loadedBody = loadedPortion === "half" || loadedPortion === "most";
  const loadedFooter = loadedPortion === "most";
  const pending = { background: "repeating-linear-gradient(45deg, #24143010 0 8px, transparent 8px 16px)" };
  const block = { height: 34, borderRadius: 8, marginBottom: 8, display: "flex", alignItems: "center", justifyContent: "center", color: "#241430", fontWeight: 600 };
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 12, color: "#241430aa" }}>
      <div style={{ ...block, background: accent }}>{showLabels && "header"}</div>
      <div aria-hidden={!loadedBody} style={{ ...block, ...(loadedBody ? {} : pending) }}>{showLabels && !loadedBody && "pending"}</div>
      <div aria-hidden={!loadedFooter} style={{ ...block, ...(loadedFooter ? {} : pending) }}>{showLabels && !loadedFooter && "pending"}</div>
      <p role="status" aria-live="polite" style={{ margin: "6px 0 0", textTransform: "capitalize" }}>{loadedPortion} loaded &mdash; the rest streams in as it becomes ready</p>
    </div>
  );
}