Loading-state button

<div class="load-demo">
  <button class="load-button" type="button" data-state="idle">
    <span class="load-text" data-for="idle">Save changes</span>
    <span class="load-text" data-for="busy"><span class="spinner" aria-hidden="true"></span>Saving…</span>
    <span class="load-text" data-for="done">Saved ✓</span>
    <span class="load-text" data-for="failed">Try again</span>
  </button>
  <label class="load-option"><input type="checkbox" id="fail-next"> Make the next save fail</label>
  <p class="load-status" role="status"></p>
</div>

.load-demo { display: grid; justify-items: center; gap: 14px; font: 14px system-ui, sans-serif; }

.load-button {
  display: grid;           /* every label sits in the same grid cell... */
  border: 0;
  cursor: pointer;
  padding: 13px 24px;
  border-radius: 12px;
  font: 600 15px system-ui, sans-serif;
  color: #fff;
  background: var(--brand);
  transition: background 0.25s;
}
.load-button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.load-button[data-state="busy"] { cursor: progress; }
.load-button[data-state="done"] { background: #12a150; }
.load-button[data-state="failed"] { background: #c93a3f; }

/* ...so the button is always as wide as its longest label and never jumps. */
.load-text {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  visibility: hidden;
}
.load-button[data-state="idle"] [data-for="idle"],
.load-button[data-state="busy"] [data-for="busy"],
.load-button[data-state="done"] [data-for="done"],
.load-button[data-state="failed"] [data-for="failed"] { visibility: visible; }

.spinner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.6s; } }

.load-option { display: flex; gap: 8px; align-items: center; color: var(--muted); }
.load-status { margin: 0; min-height: 1.4em; color: var(--muted); }

// Loading-state button: switches between idle → busy → done (or failed)
// by changing one attribute. CSS decides which label is visible.

const button = document.querySelector('.load-button');
const failNextSave = document.getElementById('fail-next');
const statusMessage = document.querySelector('.load-status');

function setState(state, message = '') {
  button.dataset.state = state;
  button.setAttribute('aria-busy', String(state === 'busy'));
  statusMessage.textContent = message; // announced by screen readers (role="status")
}

// Stand-in for a real request: waits a bit, then succeeds or fails.
function fakeSave(shouldFail) {
  return new Promise((resolve, reject) => {
    setTimeout(() => (shouldFail ? reject(new Error('Network error')) : resolve()), 1200);
  });
}

button.addEventListener('click', async () => {
  if (button.dataset.state === 'busy') return; // ignore double clicks while saving

  setState('busy', 'Saving…');
  try {
    await fakeSave(failNextSave.checked);
    setState('done', 'Your changes were saved.');
    setTimeout(() => setState('idle'), 1800);
  } catch (error) {
    setState('failed', `${error.message}. Nothing was saved.`);
  }
});