JSFiddle - React, Tailwind, and code Playground

HTML

<button type="submit" id="btn" class="sbtn btn btn-secondary btn-c">Log in</button>

<div class='spinner-displayer'></div>

CSS

* {
margin: 0;
padding: 0;
}

.loader {
display: none;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}

.loading {
border: 2px solid #ccc;
width: 60px;
height: 60px;
border-radius: 50%;
border-top-color: #1ecd97;
border-left-color:  #1ecd97;
animation: spin 1s infinite ease-in;
}

@keyframes spin {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

JavaScript

function spinner() {
	const spinnerDisplayer = document.querySelector('.spinner-displayer');
	const btn = document.getElementById('btn');

	btn.addEventListener('click', () => {
  	spinnerDisplayer.classList.add('loading');
  })
}

spinner();