Is there a way to continuously animate text during the loading process of an AJAX request? I've tried implementing various methods, such as using a setTimeout function or an infinite loop, but nothing seems to work for repeating the animation once it's finished. Can someone please shed some light on why this is happening?
document.getElementById("generateButton").addEventListener("click", function() {
var loadingIndicator = document.getElementById("loadingIndicator");
loadingIndicator.style.display = "block";
var chars = document.querySelectorAll(".char");
var delay = 0;
function repeatAnimation() {
chars.forEach(function(char) {
setTimeout(function() {
char.style.animationName = "bounce";
}, delay);
delay += 100; // Adjust this delay to control the sequence
});
setTimeout(repeatAnimation, 1000); // Launch the next repetition
}
var descriptionValue = document.getElementById("description").value;
var titleValue = document.getElementById("title").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "/generationDescription", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
loadingIndicator.style.display = "none";
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
document.getElementById("description").value = response.description;
document.getElementById("shortDescription").value =
response.shortDescription;
}
}
};
var data =
"description=" +
encodeURIComponent(descriptionValue) +
"&title=" +
encodeURIComponent(titleValue);
repeatAnimation();
xhr.send(data);
});@keyframes bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.loading-indicator .char {
display: inline-block;
animation-duration: 1s;
animation-fill-mode: both;
animation-name: none;
}<div id="loadingIndicator" class="loading-indicator" style="display: none;">
<span class="char">C</span>
<span class="char">h</span>
<span class="char">a</span>
<span class="char">r</span>
<span class="char">g</span>
<span class="char">e</span>
<span class="char">m</span>
<span class="char">e</span>
<span class="char">n</span>
<span class="char">t</span>
<span class="char"> </span>
<!-- Space between words -->
<span class="char">e</span>
<span class="char">n</span>
<span class="char"> </span>
<!-- Space between words -->
<span class="char">c</span>
<span class="char">o</span>
<span class="char">u</span>
<span class="char">r</span>
<span class="char">s</span>
<span class="char">.</span>
<span class="char">.</span>
<span class="char">.</span>
</div>