Timeout

Operation exceeded allowed time.

html

<div class="lod-tmo-stage" data-action="request">
  <div class="lod-tmo-track">
    <span class="lod-tmo-fill lod-tmo-fill--full" style="background:#F5C2E0;"></span>
    <span class="lod-tmo-marker">5000ms limit</span>
  </div>
  <p role="status" aria-live="polite" class="lod-tmo-msg">The request exceeded 5000ms and was cancelled.</p>
</div>
<style>
.lod-tmo-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-tmo-track { position: relative; height: 10px; background: #24143014; border-radius: 999px; overflow: visible; }
.lod-tmo-fill { display: block; height: 100%; width: 55%; border-radius: 999px; }
.lod-tmo-fill--full { width: 100%; background: #241430 !important; }
.lod-tmo-marker { position: absolute; right: 0; top: -18px; font-size: 10px; opacity: .6; }
.lod-tmo-msg { margin: 14px 0 0; font-weight: 600; color: #241430; }
</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-action="request">
  <div class="relative h-2.5 bg-[#24143014] rounded-full">
    <span class="tw-tmo-fill tw-tmo-full block h-full w-[55%] rounded-full" style="background:#F5C2E0;"></span>
    <span class="absolute right-0 -top-[18px] text-[10px] opacity-60">5000ms limit</span>
  </div>
  <p role="status" aria-live="polite" class="mt-3.5 font-semibold text-[#241430]">The request exceeded 5000ms and was cancelled.</p>
</div>
<style>
.tw-tmo-full { width: 100% !important; background: #241430 !important; }
</style>

react

export function Timeout({
  timedOut = true,
  timeoutMs = 5000,
  action = "request",
  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" }}>
      <div style={{ position: "relative", height: 10, background: "#24143014", borderRadius: 999 }}>
        <span style={{ display: "block", height: "100%", width: timedOut ? "100%" : "55%", borderRadius: 999, background: timedOut ? "#241430" : accent }} />
        <span style={{ position: "absolute", right: 0, top: -18, fontSize: 10, opacity: .6 }}>{timeoutMs}ms limit</span>
      </div>
      <p role="status" aria-live="polite" style={{ margin: "14px 0 0", fontWeight: 600, color: "#241430" }}>
        {timedOut ? `The ${action} exceeded ${timeoutMs}ms and was cancelled.` : `Within the ${timeoutMs}ms limit \u2014 still waiting.`}
      </p>
    </div>
  );
}