Loop status phrases in HTML

Question

I am editing a file cancellation function, and today it shows only 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, like "Wait...", "Effecting the cancellation...", "Finalizing the procedure...", for the user can follow the step by step.

Can I only do this with javascript? Or a different suggestion?

Answer 1

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

But you can use css to change the content of the message using the property content (see more here: https://developer.mozilla.org/en-US/docs/Web/CSS/content)

And if you just want to exchange messages without worrying about a certain event, just in a certain time for example you can use an animation of the css3, with @keyframes (see more here: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes)

I created a practical example that changes the 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>