Button continue loading while loading PHP

Question

I have an html page, where when the button UPDATE is performed a loading action, what I would like to do is that this loading only finished running when the file PHP finished running, because the PHP page is an entry in the database and requires a certain time. How to increment this call to the button and maintain the loading effect while loading?

var clicked = false;
var submit = document.querySelector('.submit');
submit.addEventListener("click", function(){
  // Make sure user cannot click button again until it has been reset
  if( !clicked ){
    clicked = true;
    submit.classList.remove("return");
    submit.blur();
    document.querySelector('.loading-dock').classList.add('loaded');
    document.getElementById('load').style.display= 'initial';
    document.getElementById('load-b').style.display= 'initial';
    setTimeout(function(){
      document.getElementById('load').style.opacity = 1;
    }, 750);
    setTimeout(function(){
      document.getElementById('load-b').style.opacity = 1;
    }, 900);
    setTimeout(function(){
      document.querySelector('.loading-dock').classList.remove('loaded');
      document.getElementById('load').style.display = 'none';
      document.getElementById('load-b').style.display = 'none';
      document.getElementById('load').style.opacity = 0;
      document.getElementById('load-b').style.opacity = 0;
      let submit = document.querySelector('.submit');
      submit.classList.add("popout");
      submit.innerHTML = "";
      setTimeout(function(){
      document.getElementById('check').style.display = "block";
      }, 300);
    }, 3600);

    //reset all
    setTimeout(function(){
      submit.classList.remove("popout");
      submit.classList.add("return");
      submit.innerHTML = "Update";
      document.getElementById('check').style.display = "none";
      clicked = false;
    }, 5300);
  }
})

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  font-family: 'Helvetica Neue', 'Roboto', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-dock {
  background-color: white;
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

button.submit {
  cursor: pointer;
  width: 160px;
  height: 50px;
  font-size: 17px;
  font-weight: 600;
  color: #58c996;
  background-color: white;
  border-radius: 40px;
  border: 2px solid #58c996;
  transition: all .2s;
  letter-spacing: 1px;
  font-family: 'Helvetica Neue', sans-serif;
}
button.submit:hover {
  background: #58c996;
  color: white;
}
button.submit:active {
  transform: scale(0.95);
}
button.submit:focus {
  outline: none;
  background: #58c996;
  color: white;
}
button.submit.popout {
  animation: circle-to-button .5s linear forwards;
}
button.submit.return {
  animation: fade-to-original .3s linear;
}
button.submit.return:hover {
  background: #58c996;
  color: white;
}

.loaded button.submit {
  background-color: #58c996;
  animation: button-to-circle .5s linear forwards;
  animation-delay: .3s;
}
.loaded #load {
  animation: loading-circle 3s linear forwards;
  animation-delay: 1s;
}

#load, #load-b {
  display: none;
  position: absolute;
  width: 58px;
  height: 58px;
  opacity: 0;
}
#load .loading-inner, #load-b .loading-inner {
  stroke-dasharray: 900;
  stroke-width: 8;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke: #c3c3c3;
  fill: transparent;
}

#load-b {
  opacity: 0;
}
#load-b .loading-inner {
  stroke: #58c996;
}

svg {
  position: absolute;
  display: none;
}

@keyframes loading-circle {
  0% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  50% {
    opacity: 1;
    stroke-dashoffset: -100;
  }
  100% {
    opacity: 1;
    stroke-dashoffset: -600;
  }
}
@keyframes button-to-circle {
  0% {
    width: 160px;
    color: #58c996;
    border-color: #58c996;
    background-color: #58c996;
  }
  50% {
    color: rgba(255, 255, 255, 0);
  }
  90% {
    width: 50px;
    color: rgba(255, 255, 255, 0);
    border-color: #c3c3c3;
  }
  100% {
    width: 50px;
    border-color: rgba(255, 255, 255, 0);
    color: rgba(255, 255, 255, 0);
    background-color: rgba(255, 255, 255, 0);
  }
}
@keyframes circle-to-button {
  0% {
    border-color: #58c996;
    background-color: #58c996;
    height: 50px;
    width: 50px;
  }
  50% {
    height: 50px;
    width: 50px;
  }
  100% {
    height: 50px;
    width: 160px;
    border-color: #58c996;
    background-color: #58c996;
  }
}
@keyframes fade-to-original {
  0% {
    background-color: #58c996;
  }
  100% {
    background-color: white;
  }
}

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Update</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="up" class="loading-dock">
    <svg id="load-b" x="0px" y="0px" viewBox="0 0 150 150">
    <circle class="loading-inner" cx="75" cy="75" r="60"/>
 </svg>
  <svg id="load" x="0px" y="0px" viewBox="0 0 150 150">
    <circle class="loading-inner" cx="75" cy="75" r="60"/>
 </svg>
 <button class="submit">Update</button>
  <svg id="check" style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#FFFFFF" d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z" />
</svg>
</div>
<div id="content"></div>
<!-- partial -->
 <script  src="./script.js"></script>
</body>
</html>

Call PHP

$.ajax({
    method: "post",
    url: "./insert.php",
    data: $("#up").serialize(),
success: function(data){
           alert(data);
}

Answer 1

You can remove the first part of your routine, and do it the way below, just in the location where you call php.

Although not testing the example below it shows where you should show the effect and where you should mark as completed, do the tests and adjustments. I took the liberty of converting your script to make use of jQuery. So it will be simpler for you to manipulate the DOM.

It is also interesting you adapt your button to display errors (if it occurs), I left in the routine below the example of where the implementation would be performed.

$.ajax({
    method: "post",
    url: "./insert.php",
    data: $("#form").serialize(),
    beforeSend: function (xhr) {
        // inicia a transição do botão
        $('.loading-dock').addClass('loaded');
        $('#load').css('display', 'initial');
        $('#load-b').css('display', 'initial');
        setTimeout(function(){
            $('#load').css('opacity', 1);
        }, 750);
        setTimeout(function(){
            $('#load-b').css('opacity', 1);
        }, 900);
    },
    success: function(data){
        // quando der tudo OK, eu reseto o botão
        // colocado esse time out apenas para garantir que o timeout do beforeSend tenha sido executado.
        setTimeout(function(){
            $('.loading-dock').removeClass('loaded');
            $('#load').css('display', 'none').css('opacity', 0);
            $('#load-b').css('display', 'none').css('opacity', 0);
            $('.submit').addClass('popout').html("");
            setTimeout(function(){
                $('#check').css("display", "block");
            }, 300);

                //reset all
            setTimeout(function(){
              $('.submit').removeClass("popout").addClass("return").html("Update");
              $('#check').css("display", "none");
            }, 1500);
        }, 900);
    },
    error: function(a,b,c) {
           // aqui você trata o erro...
           alert('erro...');
    }
})

I created an example in Jsfiddle, it makes a GET to another API. But from to see working..

https://jsfiddle.net/384y20j5/