Eu tenho uma página html, onde ao acionar o button
UPDATE é realizado uma ação de loading, o que eu gostaria de fazer é que esse loading só terminasse de executar quando o arquivo PHP terminasse de executar, pois a página PHP é uma inserção no banco de dados e demanda um determinado tempo. Como incrementar essa chamada ao botão e manter o efeito de loading durante o carregamento?
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>
Chamada PHP
$.ajax({
method: "post",
url: "./insert.php",
data: $("#up").serialize(),
success: function(data){
alert(data);
}