Animation of loading when sending form

Question

I put the plugin Pace Master on my page that makes a bar click at the top while the page is loading, like the one on Youtube, however, I want to make that same bar click by sending the form that contains on the page, if it is properly filled in. I’ve seen it on a multitude of sites, and it seems to be quite simple but I don’t have much knowledge in Javascript yet, so the ways I tried didn’t work. I tried to call the loading function with onclick but it didn’t work, I wanted it to work at least without checking if the form is filled because the main one would be that the user had a feedback when he clicked to send the form.

    <label for="questao5">5. Se possível, liste alguns sites que você gosta, incluindo as URLs.</label> 
    <textarea name="questao5" id="questao5" required></textarea> 
    <button class="btn" id="enviar" name="enviar" type="submit">Enviar</button>

.pace {
-webkit-pointer-events: none;
pointer-events: none;

-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

.pace-inactive {
display: none;
}
.pace .pace-progress {
background: #8BB006;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}

-Javascript plugin- Link Github

-Javascript form-

$('.formphp').on('submit', function() {
    var emailContato = "[email protected]"; // Escreva aqui o seu e-mail

    var that = $(this),
            url = that.attr('action'),
            type = that.attr('method'),
            data = {};

    that.find('[name]').each(function(index, value) {
        var that = $(this),
                name = that.attr('name'),
                value = that.val();

        data[name] = value;
    });

    $.ajax({
        url: url,
        type: type,
        data: data,
        success: function(response) {

            if( $('[name="leaveblank"]').val().length != 0 ) {
                $('.formphp').html("<div id='form-erro'></div>");
                $('#form-erro').html("<span>Falha no envio!</span><p>Você pode tentar novamente, ou enviar direto para o e-mail " + emailContato + " </p>")
                .hide()
                .fadeIn(1500, function() {
                $('#form-erro');
                });
            } else {

                $('.formphp').html("<div id='form-send'></div>");
                $('#form-send').html("<span>Mensagem enviada!</span><p>Em breve eu entro em contato com você. Abraços.</p>")
                .hide()
                .fadeIn(1500, function() {
                $('#form-send');
                });
            };
        },
        error: function(response) {
            $('.formphp').html("<div id='form-erro'></div>");
            $('#form-erro').html("<span>Falha no envio!</span><p>Você pode tentar novamente, ou enviar direto para o e-mail " + emailContato + " </p>")
            .hide()
            .fadeIn(1500, function() {
            $('#form-erro');  
        });
        }
    });

    return false;
});

Answer 1

According to the documentation, you can restart the animation with the following command:

Pace.restart();

Just enter the code in the event function that detects the form Submit:

$('.formphp').on('submit', function() {
    Pace.restart(); // inicia a animação
...

The example below is only to illustrate how the command works:

function anima(){
   Pace.restart();
}

.pace {
-webkit-pointer-events: none;
pointer-events: none;

-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

.pace-inactive {
display: none;
}
.pace .pace-progress {
background: #8BB006;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
<button class="btn" onclick="anima()" name="enviar" type="submit">Clique aqui</button>