CODEWITHSUNDEEP
javascriptjquerycss
Adam Scot
Adam Scot

Reputation: 1409

CSS Animation when page is loading

I am using AJAX to load pages on my site.

Whilst a page is loading - I want the logo to spin in order to signify that it's loading.

The jQuery (Not sure if it's actually javascript, I'm new to java/jquery) being used to control the css when the page is loading is

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 CSS controlling the animation is

    @-webkit-keyframes spin {
        from {
            -webkit-transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
        }
    }



    @-moz-keyframes spin {
        from {
            -moz-transform: rotate(0deg);
        }
        to {
            -moz-transform: rotate(360deg);
        }
    }

    @-ms-keyframes spin {
        from {
            -ms-transform: rotate(0deg);
        }
        to {
            -ms-transform: rotate(360deg);
        }
    }

    #logoholder { 

    }

    #logo   { 
        background: url(images/logo.png) 0 0 no-repeat; 

        width: 130px; 
        height: 130px; 
        -webkit-animation-name: spin; 
        -webkit-animation-duration: 1000ms; /* 40 seconds */
        -webkit-animation-iteration-count: infinite; 
        -webkit-animation-timing-function: linear;

        -moz-animation-name: spin; 
        -moz-animation-duration: 1000ms; /* 40 seconds */
        -moz-animation-iteration-count: infinite; 
        -moz-animation-timing-function: linear;

        -ms-animation-name: spin; 
        -ms-animation-duration: 1000ms; /* 40 seconds */
        -ms-animation-iteration-count: infinite; 
        -ms-animation-timing-function: linear;

        /* boooo opera */
        -o-transition: rotate(3600deg); /* works */
    }

Is there a property that I can add to the CSS (via jquery) so that the logo doesn't spin when the page isn't loading... At the moment the logo spins constantly

Maybe there is a property that I can take away from the "#logo" selector, which will invalidate the spin

and then I can add a certain property whilst the page is loading (through javascript) to make the spin work?

thanks

Upvotes: 0

Views: 630

Answers (3)

Ben Felda
Ben Felda

Reputation: 1484

It looks like your hiding the logo initially, and showing after the content loads(as mentioned in the comments). Also, you are using the display property to hide it, and the visibility property to hide it. Those are not the same. I switched your functions below, and use the display property for both. Not sure if there are other errors, but give this a try, it should get you in the right direction.

function loadPage(url)
    {
    url=url.replace('#page','');

    $('#logo').css('display','block');

    $.ajax({
        type: "POST",
        url: "load_page.php",
        data: 'page='+url,
        dataType: "html",
        success: function(msg){

            if(parseInt(msg)!=0)
              {  
               $('#pageContent').html(msg);
               $('#logo').css('display', 'none');
            }
        }

Upvotes: 0

Jani Hyytiäinen
Jani Hyytiäinen

Reputation: 5407

Use something like <body class="loading"> in your page.

Then on the bottom of the page, have $('body').removeClass('loading');

Then target your css animation with body.loading #logo selector.

Once the page is fully loaded, the jquery will remove the .loading class and the animation stops.

Also in your $.ajax you should add the .loading class at beforeSend and remove the class on complete event.

Upvotes: 0

Roy
Roy

Reputation: 987

Instead of binding the CSS animation to #logo, bind it to a class - e.g. .spin. When Ajax is starting, add the spin class to #logo, using addClass:

$("#logo").addClass("spin");

When ajax content finished loading, use removeClass:

$("#logo").removeClass("spin");

This way you can easily show the logo normally, and make it spin only when ajax is acitve.

Upvotes: 1

Related Questions