JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" name="valider" onclick="validerBtn()" value="Valider">
  <section id="loader">
    <svg version="1.1" id="L7" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" >
     <path fill="#111" d="M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3
      c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z">
          <animateTransform
             attributeName="transform"
             attributeType="XML"
             type="rotate"
             dur="2s"
             from="0 50 50"
             to="360 50 50"
             repeatCount="indefinite" />
      </path>
     
  </section>
  <script>$("#loader").hide();  </script>

CSS

#loader{
  cursor: progress;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.5);
}
#loader svg{
width: 15vw;
height: 15vw;
padding: 30vh 40vw;
display:inline-block;

}

JavaScript

function pause(millisecond) {
    var now = new Date();
    var exitTime = now.getTime() + millisecond;
    while (true) {
        now = new Date();
        if (now.getTime() > exitTime) return;
    } 
}

  function validerBtn(){
    console.log("before");
  	$("#loader").show();
  	pause(3000);
    console.log("after");
  	$("#loader").hide();
  }