JQuery center screen loading message

Question

I am aware that there is a JQuery function ajaxStart() that will display a loading message when ever a ajax call is made, i am also aware of creating a div for the loading message, both ways are shown here but these methods both create a loading message at the bottom left corner of the screen which i dont want.

EDIT: I have used both methods mentioned on the page i gave but at the moment i am using the ajaxStart()

add this as a script

<script type="text/javascript" charset="utf-8">
$("#loading").ajaxStart(function(){
    $(this).show();
}).ajaxStop(function(){
   $(this).hide();
});
</script>

add this to the HTML

<div id="loading">
   <p><img src="loading.gif" /> Please Wait</p>
</div>

Is there a way to either center one of these methods or a different method which creates a loading message in the center of the screen?

What code dit you create until now to achieve your goal? Please post that as well.. — Caspar Kleijne, May 11 '12 at 08:27

musefan · Answer 1 · 2012-05-11T08:44:29.550

Here is some code that I use to make a dialog box appear in the center of the screen. IN this example, id should be the "#id" selector for your div...

var winH = $(window).height();
var winW = $(window).width();

var dialog = $(id);

var maxheight = dialog.css("max-height");
var maxwidth = dialog.css("max-width");

var dialogheight = dialog.height();
var dialogwidth = dialog.width();

if (maxheight != "none") {
    dialogheight = Number(maxheight.replace("px", ""));
}
if (maxwidth != "none") {
    dialogwidth = Number(maxwidth.replace("px", ""));
}

dialog.css('top', winH / 2 - dialogheight / 2);
dialog.css('left', winW / 2 - dialogwidth / 2);

Also note, that if the DIV resizes dynamically while it is display then it will not auto adjust to the center of the screen, but that rarely matters in my use as my dialogs are generally a fixed sized

Here is a working example

I have a separate javascript file for this particular code but yeah just pop it wear you like. Maybe create a function that takes id as the parameter of the DIV to center then you can reuse it as you need — musefan, May 11 '12 at 08:40

score 2 · Answer 2 · answered May 11 '12 at 08:34

Put your Please Wait message in a <div id="loading_text"> (for example).

Then style it:

#loading_text {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    margin-top: -10px;
    line-height: 20px;
    text-align: center;
}

This would center a single line of text (line height 20, negative margin of 10) inside the fixed overlay.

score 1 · Answer 3 · answered Jun 14 '12 at 16:47

I realize this post is a little late, but I found a nice solution to this and thought I might share

I put this inside of the document ready function

$('.progress').ajaxStart(function () {
    $(this).dialog({
        title: "Loading data...",
        modal: true,
        width: 50,
        height: 100,
        closeOnEscape: false,
        resizable: false,
        open: function () {
            $(".ui-dialog-titlebar-close", $(this).parent()).hide(); //hides the little 'x' button
        }
    });
}).ajaxStop(function () {
    $(this).dialog('close');
});

This can be contained in a separate .js file as well.

Then in my view i use

This works great for me. No matter what function is being called, if its an ajax call, then this loading image is displayed.

Hadi Mostafapour · Answer 4 · 2012-05-11T08:44:52.720

you must align it to center of screen in this way:

left = (  this.parent().width() / 2   ) - (this.width() / 2 );
top = (  this.parent().height/ 2   ) - (this.height() / 2 );
this.css({top:top,left:left});

use blew jQuery plugin, and call

 <script type="text/javascript" charset="utf-8">
       $("#loading").ajaxStart(function(){
            $(this).show().align(); // for absolute position pass {position:'absolute'}
       }).ajaxStop(function(){
      $(this).hide();
   });
</script>

you can also create an overlay on body $('body').overlay();

// use this code:

 ;(function($){
        $.extend($.fn,{
            // Overlay ; $(body).overlay();
            overlay: function(o){

                var d={
                addClass:'',
                css:{},
                opacity:0.5,
                autoOpen:true,
                zIndex:998,
                onOpen:function(){x.show();},
                onClose:function(){x.hide();},
                onRemove:function(){x.remove();}
            },x,l;

            // Merge Options
            o=$.extend({},d,o);


            // Create overlay element
            x=$('<div>',{css:{opacity:o.opacity,zIndex:o.zIndex}}).css(o.css).addClass('overlay '+o.addClass).hide().appendTo(this);

            // If appended to body element, set position fixed
            this[0].tagName.toLowerCase()=="body"&&x.css("position","fixed");

            // Overlay Control Object
            l = {
                remove:function(){o.onRemove(l)},
                open:function(){o.onOpen(l)},
                close:function(){o.onClose(l)},
                obj:x
            };

            // Call On Show
            o.autoOpen&& o.onOpen(l);

            // Return Object
            return l;
        },


        align:function(o){

            var d={
                x:'center',
                y:'center',
                position:'fixed',
                parent:window
            };

            o=$.extend({},d,o);

            var c=$(o.parent),
                t=$(this),
                s=c.scrollTop(),
                top,
                left;

            t.css('position',o.position); // Set Css Position

            if(o.y)top  = o.y=='center' ? (c.height()/2) - (t.innerHeight()/2) : o.y;
            if(o.x)left = o.x=='center' ? (c.width()/2) - (t.innerWidth()/2) : o.x;
            if(o.position=='absolute') top += s; // For absolute position
            if(top<0) top=0;

            t.css({top:top,left:left});
        },

    });

})(jQuery);

css for overlay:

html{height:100%;width:100%;}
.overlay{width:100%;height:100%;top:0;right:0;position:absolute;background:#000;}

score 0 · Answer 5 · answered Aug 29 '12 at 22:50

0

<script type="text/javascript">
$("#loading").ajaxStart(function(){
    $(this).css('position', 'fixed')
             .css('left', '45%')
             .css('top' '45%')
             .show();
}).ajaxStop(function(){
   $(this).hide();
});
</script>

answered Aug 29 '12 at 22:50

Lester S

720
7
21

score 0 · Answer 6 · answered Apr 22 '16 at 07:40

If you are using Bootstrap and Font Awesome here is nice solution:

HTML - Your loading message (icon) need to be placed outside from your main container:

<!-- Page -->
<div class="page-content">
    My Content
</div>

<!-- Loading -->
<div id="loading" class="text-center hidden">
    <i class="fa fa-spinner fa-spin blue fa-4x"></i>
</div>

jQuery - To handle the Ajax requests.

//Run when the page load (before images and other resource)
jQuery(function($) {

    //Ajax Loading Message
    $(document).ajaxStart( function() { 
        $(".page-content").addClass('disabled');
        $('#loading').removeClass('hidden');
    }).ajaxStop( function() {
        $(".page-content").removeClass('disabled');
        $('#loading').addClass('hidden');
    });
});

CSS - The loading width (26px) need to be equal to your loading icon width, and the background color (#fff) need to be equal to your .page-content background color.

<!-- Style -->
<style>

    /* Ajax Disable */
    .page-content.disabled {
        pointer-events: none;
        opacity: 0.65;
    }
    #loading {
        position: fixed;
        top: calc(50% - 26px);
        left: calc(50% - 26px);
        z-index: 999;
        background: #fff;
    }

</style>
<!-- Style -->

Note: The pointer-events:none; is preventing from the user to click on any button, input, etc on the page, its supported IE11+.

JQuery center screen loading message

6 Answers6