JQuery effect/animation for loading

Question

I am looking for a very simple effect to let the user know that some background ajax is pending.

I was thinking of simply having "Loading" followed by three dots that animate until the ajax completes.

ie

1: Loading
2: Loading.
3: Loading..
4: Loading...

repeat

Does JQuery have any native methods to make this work?

Answer 1

if you need somthing compatible with all browser

find this working fiddel : https://jsfiddle.net/oxkzzrwe/ this plugin should be used like so :

$("#randomArea").Loadingdotdotdot({
    "speed": 400,
    "maxDots": 4,
    "word": "Loading"
});

also find the ajaxprefilter native method to do any thing before an after every ajax request

Answer 2

I agree with the answer above, there are many great css spinner solutions so use those. I personally would: Inside the event function that triggers the AJAX call, simply use

$('.spinner').show();

and then in the AJAX success callback

$('.spinner').hide();

Like this, just for example:

(I'm assuming that if you know how to use AJAX, you can work out how to make a CSS spinner. There are lots of resources and plugins available.)

$('.ajax-trigger').click(function () {
    $('.spinner').show();
    $.ajax({
       url: 'http://test.blah.com/test.php',
       data: {
          format: 'json'
       },
       error: function() {
          $('.spinner').hide();
          $('#info').html('<p>An error has occurred</p>');
       },
       dataType: 'json',
       success: function(data) {
          $('.spinner').hide();
          $('#info').html('<p>Success</p>');
       },
        type: 'GET'
    }) 
});

Answer 3

There are many (ajax) loader/spinner animations available both for jquery and vanila javascript , but personaly i prefer pure html/css spinners (sometimes they require a little bit extra html or special html)

However there are pure css spinner animations like Single Element CSS Spinners which employ only a single element (genius!)

Pure html/css animations have the advantage of working WITHOUT javascript being loaded or even activated in the browser, plus they are more performant than pure javascript animations (at least most of the time, that is).