Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I create a "Please Wait, Loading..." animation using jQuery?

I would like to place a "please wait, loading" spinning circle animation on my site. How should I accomplish this using jQuery?

like image 348
thedp Avatar asked Dec 27 '09 01:12

thedp


People also ask

How can jQuery be used to create animations?

The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect. Only numeric values can be animated (like "margin:30px").

How do I load a GIF while page is loading?

Using Code Step 1: Add loader DIV tag inside body tag. This DIV helps to display the message. Step 2: Add following CSS how it is going to displaying in browser. Step 3: Add following jQuery code when to fadeout loading image when page loads.


Video Answer


1 Answers

You could do this various different ways. It could be a subtle as a small status on the page saying "Loading...", or as loud as an entire element graying out the page while the new data is loading. The approach I'm taking below will show you how to accomplish both methods.

The Setup

Let's start by getting us a nice "loading" animation from http://ajaxload.info I'll be using enter image description here

Let's create an element that we can show/hide anytime we're making an ajax request:

<div class="modal"><!-- Place at bottom of page --></div> 

The CSS

Next let's give it some flair:

/* Start by setting display:none to make this hidden.    Then we position it in relation to the viewport window    with position:fixed. Width, height, top and left speak    for themselves. Background we set to 80% white with    our animation centered, and no-repeating */ .modal {     display:    none;     position:   fixed;     z-index:    1000;     top:        0;     left:       0;     height:     100%;     width:      100%;     background: rgba( 255, 255, 255, .8 )                  url('http://i.stack.imgur.com/FhHRx.gif')                  50% 50%                  no-repeat; }  /* When the body has the loading class, we turn    the scrollbar off with overflow:hidden */ body.loading .modal {     overflow: hidden;    }  /* Anytime the body has the loading class, our    modal element will be visible */ body.loading .modal {     display: block; } 

And finally, the jQuery

Alright, on to the jQuery. This next part is actually really simple:

$body = $("body");  $(document).on({     ajaxStart: function() { $body.addClass("loading");    },      ajaxStop: function() { $body.removeClass("loading"); }     }); 

That's it! We're attaching some events to the body element anytime the ajaxStart or ajaxStop events are fired. When an ajax event starts, we add the "loading" class to the body. and when events are done, we remove the "loading" class from the body.

See it in action: http://jsfiddle.net/VpDUG/4952/

like image 129
Sampson Avatar answered Sep 24 '22 21:09

Sampson