Loading State

State representing an active operation.

html

<div class="lst lst--loading" role="status" aria-label="Profile is loading">
  <p class="lst__panel lst__panel--idle">Not requested yet</p>
  <p class="lst__panel lst__panel--loading"><span class="lst__spin" style="border-top-color:#BFD9F2;"></span>Loading Profile&hellip;</p>
  <p class="lst__panel lst__panel--loaded" style="color:#BFD9F2;">Profile loaded</p>
  <p class="lst__panel lst__panel--error">Failed to load Profile</p>
</div>
<style>
.lst { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 280px; box-sizing: border-box; }
.lst__panel { display: none; margin: 0; font-weight: 600; align-items: center; gap: 8px; }
.lst--idle .lst__panel--idle, .lst--loading .lst__panel--loading, .lst--loaded .lst__panel--loaded, .lst--error .lst__panel--error { display: flex; }
.lst--idle .lst__panel--idle { color: #24143080; font-weight: 400; }
.lst--error .lst__panel--error { color: #E8A020; }
.lst__spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #24143020; display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .lst__spin { animation: lst-spin .8s linear infinite; }
}
@keyframes lst-spin { to { transform: rotate(360deg); } }
</style>

tailwind

<div class="lsttw lsttw--loading font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[280px] box-border" role="status" aria-label="Profile is loading">
  <p class="lsttw__panel lsttw__panel--idle hidden m-0 items-center gap-2 text-[#24143080] font-normal">Not requested yet</p>
  <p class="lsttw__panel lsttw__panel--loading hidden m-0 items-center gap-2 font-semibold"><span class="lsttw__spin w-3.5 h-3.5 rounded-full border-2 border-[#24143020] inline-block" style="border-top-color:#BFD9F2;"></span>Loading Profile&hellip;</p>
  <p class="lsttw__panel lsttw__panel--loaded hidden m-0 items-center gap-2 font-semibold" style="color:#BFD9F2;">Profile loaded</p>
  <p class="lsttw__panel lsttw__panel--error hidden m-0 items-center gap-2 font-semibold text-[#E8A020]">Failed to load Profile</p>
</div>
<style>
.lsttw--idle .lsttw__panel--idle, .lsttw--loading .lsttw__panel--loading, .lsttw--loaded .lsttw__panel--loaded, .lsttw--error .lsttw__panel--error { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .lsttw__spin { animation: lsttw-spin .8s linear infinite; }
}
@keyframes lsttw-spin { to { transform: rotate(360deg); } }
</style>

react

export function LoadingState({
  contentLabel = "Profile",
  stage = "loading",
  accent = "#BFD9F2",
  showSpinner = true,
}) {
  return (
    <div role="status" aria-label={`${contentLabel} is ${stage}`} style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, width: 280, boxSizing: "border-box" }}>
      {stage === "idle" && <p style={{ margin: 0, color: "#24143080" }}>Not requested yet</p>}
      {stage === "loading" && (
        <p style={{ margin: 0, display: "flex", alignItems: "center", gap: 8, fontWeight: 600 }}>
          {showSpinner && <span style={{ width: 14, height: 14, borderRadius: "50%", border: "2px solid #24143020", borderTopColor: accent, display: "inline-block" }} />}
          Loading {contentLabel}&hellip;
        </p>
      )}
      {stage === "loaded" && <p style={{ margin: 0, fontWeight: 600, color: accent }}>{contentLabel} loaded</p>}
      {stage === "error" && <p style={{ margin: 0, fontWeight: 600, color: "#E8A020" }}>Failed to load {contentLabel}</p>}
    </div>
  );
}