1

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);
}
2
  • Olá Luis, pode postar a rotina que você usa para chamar o PHP? Commented 14/08/2019 às 19:23
  • Vou adicionar na pergunta! Commented 14/08/2019 às 19:23

1 Resposta 1

1

Você pode remover a primeira parte de sua rotina, e fazer da maneira abaixo, apenas no local onde você chama o php.

Apesar de não testar o exemplo abaixo ele mostra onde você deve mostrar o efeito e onde você deve marcar como concluído, faça os testes e os ajustes. Tomei a liberdade de converter o seu script para fazer o uso do jQuery. Assim ficará mais simples para você manipular o DOM.

Também é interessante você adaptar o seu botão para exibir erros (caso ocorra), deixei na rotina abaixo o exemplo de onde seria realizado a implementação.

$.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...');
    }
})

Criei um exemplo no JSFiddle, ele faz um GET para uma outra API. Mas da para ver funcionando..

https://jsfiddle.net/384y20j5/

6
  • Desculpa demora amigo, testei aqui porém não deu certo a implementação, será que você poderia mostrar como ficou seu HTML por favor? Commented 14/08/2019 às 20:20
  • @LuisV. não consegui efetuar os testes aqui. Vou tentar fazer um fiddler. Commented 14/08/2019 às 20:21
  • belezaa, fico no aguardo!! Commented 14/08/2019 às 20:23
  • 1
    @LuisV. tá na resposta. Commented 14/08/2019 às 20:30
  • Funcionou perfeitamente, muito obrigado!! :) Commented 14/08/2019 às 20:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .