Loading

Operation in progress.

html

<button class="ld-btn" type="button" style="--accent:#BFD9F2;border-radius:9px;" aria-busy="true" disabled>
  <span class="ld-btn__spinner" aria-hidden="true"></span>
  <span>Saving…</span>
</button>
<style>
.ld-btn { display: inline-flex; align-items: center; gap: 9px; font: 700 15px system-ui, sans-serif; padding: 11px 22px; border: 2px solid var(--accent); background: var(--accent); color: #241430; cursor: pointer; }
.ld-btn:disabled { cursor: not-allowed; opacity: .8; }
.ld-btn__spinner { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid #24143040; border-top-color: #241430; }
@keyframes ld-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .ld-btn__spinner { animation: ld-spin .2s linear infinite; }
}
</style>

tailwind

<button type="button" aria-busy="true" class="inline-flex items-center gap-2.5 font-bold text-[15px] px-[22px] py-[11px] border-2 text-[#241430] cursor-pointer disabled:cursor-not-allowed disabled:opacity-80" style="border-color:#BFD9F2;background:#BFD9F2;border-radius:9px;" disabled>
  <span class="w-3.5 h-3.5 rounded-full border-[2.5px] border-[#24143040] motion-safe:animate-spin" style="border-top-color:#241430" aria-hidden="true"></span>
  <span>Saving…</span>
</button>

react

export function LoadingState({
  label = "Save changes",
  accent = "#BFD9F2",
  force = true,
  radius = 9,
}) {
  return (
    <>
      <button type="button" disabled={force} aria-busy={force}
        style={{ display: "inline-flex", alignItems: "center", gap: 9, font: "700 15px system-ui, sans-serif", padding: "11px 22px", borderRadius: radius, border: `2px solid ${accent}`, background: accent, color: "#241430", cursor: force ? "not-allowed" : "pointer", opacity: force ? 0.8 : 1 }}>
        {force && (
          <span aria-hidden="true" className="loading-spinner" style={{ width: 14, height: 14, borderRadius: "50%", border: "2.5px solid #24143040", borderTopColor: "#241430" }} />
        )}
        <span>{force ? "Saving…" : label}</span>
      </button>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .loading-spinner { animation: ld-spin .7s linear infinite; }
          @keyframes ld-spin { to { transform: rotate(360deg); } }
        }
      `}</style>
    </>
  );
}