Initial Loading

First load of a view/resource.

html

<div class="lod-init-stage" data-style="skeleton">
  
  <div class="lod-init-skeleton" aria-hidden="true">
    <span class="lod-init-bar lod-init-bar--w"></span>
    <span class="lod-init-bar lod-init-bar--m"></span>
    <span class="lod-init-spinner" style="border-top-color:#BFD9F2;"></span>
  </div>
  <p role="status" aria-live="polite">Loading your dashboard&hellip;</p>
  
  
</div>
<style>
.lod-init-stage { width: 100%; max-width: 320px; padding: 18px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 13px system-ui, sans-serif; color: #241430aa; }
.lod-init-bar { display: block; height: 12px; background: #24143014; border-radius: 6px; margin-bottom: 8px; }
.lod-init-bar--w { width: 100%; } .lod-init-bar--m { width: 60%; }
.lod-init-skeleton { display: none; }
[data-style="skeleton"] .lod-init-skeleton { display: block; }
.lod-init-spinner { display: none; width: 26px; height: 26px; border: 3px solid #24143022; border-radius: 999px; }
[data-style="spinner"] .lod-init-spinner { display: inline-block; }
[data-style="spinner"] .lod-init-bar { display: none; }
.lod-init-title { margin: 0 0 6px; color: #241430; }
.lod-init-body { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  [data-style="spinner"] .lod-init-spinner { animation: lod-init-spin 900ms linear infinite; }
  @keyframes lod-init-spin { to { transform: rotate(360deg); } }
}
</style>

tailwind

<div class="w-full max-w-[320px] p-[18px] bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-sm text-[#241430]/70" data-style="skeleton">
  
  <div class="tw-init-skeleton" aria-hidden="true">
    <span class="tw-init-bar block h-3 bg-[#24143014] rounded-md mb-2 w-full"></span>
    <span class="tw-init-bar block h-3 bg-[#24143014] rounded-md mb-2 w-3/5"></span>
    <span class="tw-init-spinner hidden w-[26px] h-[26px] border-[3px] border-[#24143022] rounded-full" style="border-top-color:#BFD9F2;"></span>
  </div>
  <p role="status" aria-live="polite">Loading your dashboard&hellip;</p>
  
  
</div>
<style>
[data-style="spinner"] .tw-init-spinner { display: inline-block; }
[data-style="spinner"] .tw-init-bar { display: none; }
@media (prefers-reduced-motion: no-preference) {
  [data-style="spinner"] .tw-init-spinner { animation: lod-init-tw-spin 900ms linear infinite; }
  @keyframes lod-init-tw-spin { to { transform: rotate(360deg); } }
}
</style>

react

export function InitialLoading({
  loaded = false,
  style = "skeleton",
  title = "Welcome back, Priya",
  accent = "#BFD9F2",
}) {
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 18, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430aa" }}>
      {!loaded && (
        <>
          <div aria-hidden="true">
            {style === "skeleton" ? (
              <>
                <span style={{ display: "block", height: 12, background: "#24143014", borderRadius: 6, marginBottom: 8, width: "100%" }} />
                <span style={{ display: "block", height: 12, background: "#24143014", borderRadius: 6, marginBottom: 8, width: "60%" }} />
              </>
            ) : (
              <span className="spinner" style={{ display: "inline-block", width: 26, height: 26, border: "3px solid #24143022", borderTopColor: accent, borderRadius: 999 }} />
            )}
          </div>
          <p role="status" aria-live="polite">Loading your dashboard&hellip;</p>
        </>
      )}
      {loaded && (
        <>
          <h3 style={{ margin: "0 0 6px", color: "#241430" }}>{title}</h3>
          <p style={{ margin: 0 }}>Your dashboard is ready.</p>
        </>
      )}
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .spinner { animation: lod-init-spin 900ms linear infinite; }
          @keyframes lod-init-spin { to { transform: rotate(360deg); } }
        }
      `}</style>
    </div>
  );
}