Skip to content
Fix Code Error

How can I create a “Please Wait, Loading…” animation using jQuery?

March 13, 2021 by Code Error
Posted By: Anonymous

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

Solution

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/

Answered By: Anonymous

Related Articles

  • Why are CSS keyframe animations broken in Vue components…
  • javascript .replace and .trim not working in vuejs
  • Animating Elements in One by One
  • Python File Error: unpack requires a buffer of 16 bytes
  • Spring Boot - Cannot determine embedded database driver…
  • sql query to find priority jobs
  • d3.js - dragmove circle with v6 not work as expected
  • Integrating JSON feed with Backbone JS
  • Creating a template class and using it for returning…
  • How to use html template with vue.js

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

Get the data received in a Flask request

Next Post:

Does Python’s time.time() return the local or UTC timestamp?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error