CODEWITHSUNDEEP
javascriptjquery
HappyCoder
HappyCoder

Reputation: 6155

JQuery effect/animation for loading

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.

i.e

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

repeat

Does JQuery have any native methods to make this work?

Upvotes: 2

Views: 392

Answers (3)

Jonathan P
Jonathan P

Reputation: 458

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'
    }) 
});

Upvotes: 1

Hasan Daghash
Hasan Daghash

Reputation: 1691

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

Upvotes: 2

Nikos M.
Nikos M.

Reputation: 8325

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).

Upvotes: 0

Related Questions