Pending

Operation has started but not completed.

html

<div class="lod-pnd-stage" data-action="submit">
  <button type="button" class="lod-pnd-btn lod-pnd-btn--pending" style="--accent:#E8A020;">
    <span class="lod-pnd-spin"></span>
    <span class="lod-pnd-label lod-pnd-label--submit">Submitting&hellip;</span>
    <span class="lod-pnd-label lod-pnd-label--upload">Uploading&hellip;</span>
  </button>
  <p role="status" aria-live="polite" class="lod-pnd-caption">Started, not yet finished</p>
</div>
<style>
.lod-pnd-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-pnd-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; border: none; border-radius: 8px; padding: 9px 16px; background: var(--accent); color: #241430; cursor: pointer; }
.lod-pnd-btn--pending { opacity: .8; cursor: progress; }
.lod-pnd-spin { width: 13px; height: 13px; border: 2px solid #24143044; border-top-color: #241430; border-radius: 999px; display: inline-block; }
.lod-pnd-label { display: none; }
[data-action="submit"] .lod-pnd-label--submit,
[data-action="upload"] .lod-pnd-label--upload { display: inline; }
.lod-pnd-caption { margin: 10px 0 0; font-size: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .lod-pnd-spin { animation: lod-pnd-spin 800ms linear infinite; }
  @keyframes lod-pnd-spin { to { transform: rotate(360deg); } }
}
</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="submit">
  <button type="button" class="tw-pnd-btn tw-pnd-pending inline-flex items-center gap-2 font-semibold border-0 rounded-lg px-4 py-2.5 text-[#241430] cursor-pointer" style="background:#E8A020;">
    <span class="tw-pnd-spin w-[13px] h-[13px] border-2 border-[#24143044] rounded-full inline-block"></span>
    <span class="tw-pnd-submit">Submitting&hellip;</span>
    <span class="tw-pnd-upload">Uploading&hellip;</span>
  </button>
  <p role="status" aria-live="polite" class="mt-2.5 text-xs">Started, not yet finished</p>
</div>
<style>
.tw-pnd-submit, .tw-pnd-upload { display: none; }
[data-action="submit"] .tw-pnd-submit,
[data-action="upload"] .tw-pnd-upload { display: inline; }
.tw-pnd-spin { border-top-color: #241430; }
@media (prefers-reduced-motion: no-preference) {
  .tw-pnd-spin { animation: lod-pnd-tw-spin 800ms linear infinite; }
  @keyframes lod-pnd-tw-spin { to { transform: rotate(360deg); } }
}
</style>

react

export function Pending({
  isPending = true,
  action = "submit",
  duration = 800,
  accent = "#E8A020",
}) {
  const verb = action === "submit" ? "Submit" : "Upload";
  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" }}>
      <button type="button" disabled={isPending} style={{ display: "inline-flex", alignItems: "center", gap: 8, fontWeight: 600, border: "none", borderRadius: 8, padding: "9px 16px", background: accent, color: "#241430", cursor: isPending ? "progress" : "pointer", opacity: isPending ? .8 : 1 }}>
        {isPending && <span className="spin" style={{ width: 13, height: 13, border: "2px solid #24143044", borderTopColor: "#241430", borderRadius: 999, display: "inline-block" }} />}
        <span>{isPending ? `${verb}ting\u2026` : verb}</span>
      </button>
      <p role="status" aria-live="polite" style={{ margin: "10px 0 0", fontSize: 12 }}>{isPending ? "Started, not yet finished" : "Idle, ready to start"}</p>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .spin { animation: lod-pnd-spin ${duration}ms linear infinite; }
          @keyframes lod-pnd-spin { to { transform: rotate(360deg); } }
        }
      `}</style>
    </div>
  );
}