Promise Toast

<div class="nuda-ta2-promise" role="status" aria-live="polite">
  <span class="nuda-ta2-promise__icon" aria-hidden="true">
    <svg class="nuda-ta2-promise__spinner" viewBox="0 0 24 24" width="18" height="18">
      <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2.5"
        stroke-linecap="round" stroke-dasharray="42" stroke-dashoffset="14"></circle>
    </svg>
    <svg class="nuda-ta2-promise__check" viewBox="0 0 24 24" width="18" height="18">
      <path fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
        stroke-linejoin="round" stroke-dasharray="20" stroke-dashoffset="20" d="M6 12l4 4 8-8"></path>
    </svg>
  </span>
  <span class="nuda-ta2-promise__text">
    <span class="nuda-ta2-promise__text-loading">Uploading file&hellip;</span>
    <span class="nuda-ta2-promise__text-success">File uploaded</span>
  </span>
</div>

.nuda-ta2-promise {
  --c: #e4ff54;
  display: flex;
  align-items: center;
  gap: .7rem;
  background: #161616;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: .7rem .9rem;
  min-width: 230px;
  max-width: 290px;
}

.nuda-ta2-promise__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.nuda-ta2-promise__spinner {
  position: absolute;
  color: #8a8a8a;
  animation: _nuda-ta2promisespin .8s linear infinite,_nuda-ta2promisespinout .25s ease forwards 1.4s;
}

.nuda-ta2-promise__check {
  position: absolute;
  color: #3ddc97;
  opacity: 0;
  animation: _nuda-ta2promisecheckin .3s ease forwards 1.5s;
}

.nuda-ta2-promise__text {
  position: relative;
  display: inline-block;
  font-size: .82rem;
  color: #cfcfcf;
  min-height: 1.1em;
}

.nuda-ta2-promise__text-loading,.nuda-ta2-promise__text-success {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}

.nuda-ta2-promise__text-loading {
  animation: _nuda-ta2promisetextout .25s ease forwards 1.4s;
}

.nuda-ta2-promise__text-success {
  opacity: 0;
  color: #fafafa;
  font-weight: 600;
  animation: _nuda-ta2promisetextin .3s ease forwards 1.5s;
}

@keyframes _nuda-ta2promisespin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes _nuda-ta2promisespinout {
  to {
    opacity: 0;
  }
}

@keyframes _nuda-ta2promisecheckin {
  from {
    opacity: 0;
    stroke-dashoffset: 20;
  }
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes _nuda-ta2promisetextout {
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes _nuda-ta2promisetextin {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ta2-promise__spinner {
    animation: none;
    opacity: 0;
  }
  .nuda-ta2-promise__check {
    animation: none;
    opacity: 1;
  }
  .nuda-ta2-promise__text-loading {
    animation: none;
    opacity: 0;
  }
  .nuda-ta2-promise__text-success {
    animation: none;
    opacity: 1;
  }
}