Bootstrap Rate-Limited Action Button — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bsrate-card">
    <div class="card-body p-4">
      <label class="form-label small fw-semibold">Invite a teammate</label>
      <div class="input-group mb-2">
        <input type="email" class="form-control" id="bsrateEmail" placeholder="[email protected]">
        <button type="button" class="btn btn-dark fw-bold" id="bsrateBtn">Send invite</button>
      </div>
      <p class="small text-muted mb-0" id="bsrateStatus">You can send up to 3 invites per minute.</p>
    </div>
  </div>
</div>

.bsrate-card { width: 380px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
#bsrateStatus.text-danger { color: #dc3545 !important; }
#bsrateStatus.text-success { color: #198754 !important; }

const LIMIT = 3;
const WINDOW_MS = 60 * 1000;
const DEMO_WINDOW_MS = 8 * 1000; // sped up so the cooldown is actually observable here

const btn = document.getElementById('bsrateBtn');
const email = document.getElementById('bsrateEmail');
const status = document.getElementById('bsrateStatus');

// Timestamps of recent sends. Rate limiting by "count within a sliding
// window" rather than a flat cooldown after every click — the first LIMIT
// clicks are instant, and only clicking faster than the limit allows starts
// blocking, which matches how real API rate limits typically behave.
let sentAt = [];
let cooldownTimer = null;

function prune() {
  const cutoff = Date.now() - DEMO_WINDOW_MS;
  sentAt = sentAt.filter(t => t > cutoff);
}

function msUntilNextSlot() {
  prune();
  if (sentAt.length < LIMIT) return 0;
  return sentAt[0] + DEMO_WINDOW_MS - Date.now();
}

function updateButton() {
  const wait = msUntilNextSlot();
  clearInterval(cooldownTimer);

  if (wait <= 0) {
    btn.disabled = false;
    btn.textContent = 'Send invite';
    return;
  }

  btn.disabled = true;
  const tick = () => {
    const remaining = Math.ceil(msUntilNextSlot() / 1000);
    if (remaining <= 0) {
      clearInterval(cooldownTimer);
      updateButton();
      return;
    }
    btn.textContent = 'Wait ' + remaining + 's';
  };
  tick();
  cooldownTimer = setInterval(tick, 250);
}

btn.addEventListener('click', () => {
  if (!email.value.trim()) {
    status.textContent = 'Enter an email address first.';
    status.className = 'small text-danger mb-0';
    return;
  }
  if (msUntilNextSlot() > 0) return;

  sentAt.push(Date.now());
  status.textContent = 'Invite sent to ' + email.value.trim() + '.';
  status.className = 'small text-success mb-0';
  email.value = '';
  updateButton();
});

updateButton();