Loading Ring Confirm Button

<!--
  Author: @samir-khan
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<button class="ring-confirm-btn">
  <span class="ring-confirm-btn__ring"></span>
  <svg class="ring-confirm-btn__check" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3">
    <path d="M4 12.5L9.5 18L20 6.5" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
  <span class="ring-confirm-btn__label">Place Order</span>
</button>

/*
 * Author: @samir-khan
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.ring-confirm-btn {
  position: relative;
  width: 160px;
  height: 48px;
  border: none;
  border-radius: 999px;
  background: #4f46e5;
  color: #fff;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  transition: width 0.4s ease 0.3s, background 0.3s ease 0.7s;
}
.ring-confirm-btn:active,
.ring-confirm-btn:focus {
  width: 48px;
  background: #16a34a;
}
.ring-confirm-btn__label {
  transition: opacity 0.2s ease;
}
.ring-confirm-btn:active .ring-confirm-btn__label,
.ring-confirm-btn:focus .ring-confirm-btn__label {
  opacity: 0;
}
.ring-confirm-btn__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  opacity: 0;
}
.ring-confirm-btn:active .ring-confirm-btn__ring,
.ring-confirm-btn:focus .ring-confirm-btn__ring {
  opacity: 1;
  animation: ring-spin 0.6s linear 0s 1, ring-fade 0.3s ease 0.6s forwards;
}
.ring-confirm-btn__check {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  opacity: 0;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}
.ring-confirm-btn:active .ring-confirm-btn__check,
.ring-confirm-btn:focus .ring-confirm-btn__check {
  animation: check-appear 0.2s ease 0.7s forwards, check-draw 0.3s ease 0.7s forwards;
}
@keyframes ring-spin {
  to { transform: rotate(360deg); }
}
@keyframes ring-fade {
  to { opacity: 0; }
}
@keyframes check-appear {
  to { opacity: 1; }
}
@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}