Currently, I am implementing AJAX to dynamically load pages on my website. During the loading process, I wish to incorporate a spinning animation on the logo to indicate that content is being fetched.
The jQuery script (although I'm still learning and unsure if it's JavaScript or jQuery) responsible for managing the CSS modifications when a page is loading looks like this:
function loadPage(url)
{
url=url.replace('#page','');
$('#logo').css('display','none;');
$.ajax({
type: "POST",
url: "load_page.php",
data: 'page='+url,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#pageContent').html(msg);
$('#logo').css('visibility','visible');
}
}
The keyframes specified in the CSS control the spinning animation as follows:
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#logoholder {
}
#logo {
background: url(images/logo.png) 0 0 no-repeat;
width: 130px;
height: 130px;
animation-name: spin;
animation-duration: 1000ms; /* 1 second */
animation-iteration-count: infinite;
animation-timing-function: linear;
-o-animation: none; /* Placeholder for Opera support */
}
I am currently seeking a way to adjust the CSS properties via jQuery so that the logo only spins while the page is loading, without continuous rotation during idle times. Is there a specific attribute that can be added or removed within the "#logo" selector to achieve this effect?
Any advice on how to dynamically enable or disable the spinning animation based on the loading status of the page would be greatly appreciated!