<button class="radikalwp-btn-loading" data-demo-loading>ثبت سفارش<//button>

.radikalwp-btn-loading {
  position: relative;
  padding: 13px 40px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #4f46e5;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}
.radikalwp-btn-loading.is-loading {
  color: transparent;
  background: #6366f1;
  pointer-events: none;
}
.radikalwp-btn-loading.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: radikalwp-btn-loading-spin .7s linear infinite;
}
@keyframes radikalwp-btn-loading-spin {
  to { transform: rotate(360deg); }
}

// دموی افکت: با هر کلیک، اسپینر ۲ ثانیه می‌چرخد و دکمه به حالت عادی برمی‌گردد
document.querySelectorAll('[data-demo-loading]').forEach(function (btn) {
  btn.addEventListener('click', function () {
    if (btn.classList.contains('is-loading')) return;
    btn.classList.add('is-loading');
    setTimeout(function () { btn.classList.remove('is-loading'); }, 2000);
  });
});