Loop of HTML status phrases

Navigation
-1

I am editing a file cancellation function, and today it only shows the status "Waiting ...", according to the code: 

&js<
            cancelEvent = "";
            $(".ui-overlay").show();
            $("#retorno").empty().html("<img src='../loader.gif' width='14' align='absmiddle'> Aguardando...");
            $.get("../javascript/Cancela.php#(qs)#",function(data){
                 $("#retorno").empty().html(data);
                     if(data == 1) {
                        processaEvento('#(NF)#','#(DESC)#','#(DT1)#','#(DT2)#','#(OP)#');
                     } else {
                        alert("Não foi possível realizar o cancelamento");
                        document.getElementById("btSalvar").disabled = false;
                        document.getElementById("btSalvar").value = "Salvar";
                     }
            });
            $(".ui-overlay").hide();
        >

I want to add a sequence of loading phrases, such as "Wait ..." , "Canceling ..." , "Finalizing the procedure ... ", so the user can follow the step by step.

Can I just do this with javascript? Or any different suggestions?

    
asked by anonymous 20.03.2018 / 18:36

1 answer

1

Javascript is the best option because you can change the text according to events, showing different messages for each status.

But you can use css to change the content of the message using the content property (see here: link )

And if you just want to change the messages without worrying about a certain event, just in a certain time, for example, you can use a css3 animation with @keyframes (see here: link )

I created a practical example that makes the exchange of texts in 30s 

h1:before{
    content: 'Aguarde...';
    font-size: 200%;
    animation-name: head;
    animation-duration: 30s;
    animation-iteration-count: infinite;
}

@keyframes head {
    0% {content: "Aguarde..."}
    25% {content: "Mensagem 2"}
    50% {content: "3a mensagem"}
    75% {content: "Quarta mensagem"}
    100% {content: "Mensagem Final"}
}
<header>
    <h1></h1>
</header>
    
20.03.2018 / 18:55
How to read three values on the same line? W# How to read an integer without limit of digits in C [closed]