JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div class="loader">
  
  </div>
  <div class="status">
  
  </div>
</div>

CSS

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  opacity: 0;
}

.loader.show {
  opacity: 1;
}

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

JavaScript

const loader = document.querySelector('.loader');
const status = document.querySelector('.status');

// This function simply emulates an asynchronous function
const wait = (ms = 5000) => {
	return new Promise((resolve) => {
  	setTimeout(() => {
    	resolve();
    },ms)
  })
}

const toggleLoader = (state) => {
	loader.classList.toggle('show', state);
}


const timeout = setTimeout(toggleLoader, 5000);

status.textContent = "Starting load function";
wait(4000)
.then(() => {
	status.textContent = "Load function complete";
  	toggleLoader(false);
		clearTimeout(timeout);
})