Search code examples
jqueryhtmlfadeinfadeoutloader

Show Loader while Div is Loading or Fading in or out

I have a webpage that is animated using a jQuery fadeIn / fadeOut with divs. Each part of the webpage is loaded by the fade In effect, and the site never navigates to a new webpage. I am looking for a loading image to display each time while the fadeIn / fadeOut is in effect. How can I program this?

Solution

  • I have always used this link to generate loading images...

    Then the quickest thing to do is show and hide a DIV with that loading image in, or in jQuery add and remove a class to a DIV.

    In CSS that class can apply the image as a background image to the DIV and centralise it.

    $('#yourDiv').fadeOut('slow', function() 
{
     // Code to hide or show loading image
});`