Auth Loading Button

<button class="nuda-authload" type="button">
  <span class="nuda-authload__text">Sign in</span>
  <span class="nuda-authload__spinner"></span>
</button>

const btn = document.querySelector('.nuda-authload');

btn.addEventListener('click', () => {
  btn.classList.add('is-loading');
  setTimeout(() => {
    btn.classList.remove('is-loading');
    btn.classList.add('is-success');
    btn.querySelector('.nuda-authload__text').textContent = 'Signed in';
  }, 1600);
});

.nuda-authload {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  min-width: 160px;
  background: #e4ff54;
  color: #09090b;
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.3s;
}

.nuda-authload__text {
  transition: opacity 0.25s, transform 0.35s;
}

.nuda-authload__spinner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(9, 9, 11, 0.25);
  border-top-color: #09090b;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s, transform 0.35s;
  animation: nuda-auth-spin 0.9s linear infinite;
}

.nuda-authload.is-loading { background: #b8cc43; cursor: progress; }
.nuda-authload.is-loading .nuda-authload__text { opacity: 0; transform: translateX(8px); }
.nuda-authload.is-loading .nuda-authload__spinner { opacity: 1; transform: scale(1); }

.nuda-authload.is-success { background: #6ee7b7; }
.nuda-authload.is-success .nuda-authload__spinner { display: none; }

@keyframes nuda-auth-spin { to { transform: rotate(360deg); } }