Pending State

Operation awaiting completion.

html

<div class="pending" role="status" aria-live="polite">
  <span class="pending__spinner" aria-hidden="true"></span>
  <div class="pending__body">
    <p class="pending__label">Processing your request</p>
    <p class="pending__stage">queued · ETA about 30 seconds</p>
  </div>
</div>
<style>
.pending { display: flex; align-items: center; gap: 12px; max-width: 320px; padding: 12px 16px; box-sizing: border-box;
  border-radius: 10px; background: #FAF7F2; border: 1px solid #24143022; font: 13.5px/1.4 system-ui, sans-serif; color: #241430; }
.pending__spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid #24143022; border-top-color: #8A6FBF;
  flex-shrink: 0; }
@keyframes pending-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .pending__spinner { animation: pending-spin .2s linear infinite; }
}
.pending__label { margin: 0; font-weight: 700; }
.pending__stage { margin: 2px 0 0; text-transform: capitalize; color: #241430b3; }
</style>

tailwind

<div role="status" aria-live="polite" class="pending-tw flex items-center gap-3 max-w-xs px-4 py-3 box-border rounded-lg bg-[#FAF7F2] border border-[#24143022] font-sans text-[13.5px] text-[#241430]">
  <span aria-hidden="true" class="pending-tw__spinner w-5 h-5 rounded-full flex-shrink-0 border-[2.5px] border-[#24143022]" style="border-top-color:#8A6FBF"></span>
  <div>
    <p class="m-0 font-bold">Processing your request</p>
    <p class="mt-0.5 mb-0 capitalize text-[#241430]/70">queued · ETA about 30 seconds</p>
  </div>
</div>
<style>
@keyframes pending-tw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .pending-tw__spinner { animation: pending-tw-spin .2s linear infinite; }
}
</style>

react

export function PendingState({
  label = "Processing your request",
  stage = "queued",
  eta = "about 30 seconds",
  showSpinner = true,
}) {
  return (
    <div role="status" aria-live="polite" style={{ display: "flex", alignItems: "center", gap: 12, maxWidth: 320,
      padding: "12px 16px", boxSizing: "border-box", borderRadius: 10, background: "#FAF7F2",
      border: "1px solid #24143022", font: "13.5px/1.4 system-ui, sans-serif", color: "#241430" }}>
      {showSpinner && (
        <span aria-hidden="true" className="pending-spinner" style={{ width: 20, height: 20, borderRadius: "50%", border: "2.5px solid #24143022",
          borderTopColor: "#8A6FBF", flexShrink: 0 }} />
      )}
      <div>
        <p style={{ margin: 0, fontWeight: 700 }}>{label}</p>
        <p style={{ margin: "2px 0 0", textTransform: "capitalize", color: "#241430b3" }}>{stage} · ETA {eta}</p>
      </div>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .pending-spinner { animation: pending-react-spin .8s linear infinite; }
          @keyframes pending-react-spin { to { transform: rotate(360deg); } }
        }
      `}</style>
    </div>
  );
}