Alex Man Alex Man - 6 months ago 18
CSS Question

loading not showing within the box

I have used jquery and css to show a loader with gray background during an ajax call. The thing is I need the loader and the gray background to be visible only within a box like as shown below with loading text and icon in center

enter image description here

My code is working fine but the loader with gray background is showing for the full page like as shown below.

enter image description here

Can anyone please tell me some solution for this

My code is as given below

JSFiddle

ajaxindicatorstart('loading data.. please wait..');

function ajaxindicatorstop()
{
$('#resultLoading .bg').height('100%');
$('#resultLoading').fadeOut(300);
$('.myBox').css('cursor', 'default');
}

function ajaxindicatorstart(text)
{
if($('.myBox').find('#resultLoading').attr('id') != 'resultLoading'){
$('.myBox').append('<div id="resultLoading" style="display:none"><div><img src="http://w3lessons.info/demo/ajax-indicator/ajax-loader.gif"><div>'+text+'</div></div><div class="bg"></div></div>');
}

$('#resultLoading').css({
'width':'100%',
'height':'100%',
'position':'fixed',
'z-index':'10000000',
'top':'0',
'left':'0',
'right':'0',
'bottom':'0',
'margin':'auto'
});

$('#resultLoading .bg').css({
'background':'#000000',
'opacity':'0.7',
'width':'100%',
'height':'100%',
'position':'absolute',
'top':'0'
});

$('#resultLoading>div:first').css({
'width': '250px',
'height':'75px',
'text-align': 'center',
'position': 'fixed',
'top':'0',
'left':'0',
'right':'0',
'bottom':'0',
'margin':'auto',
'font-size':'16px',
'z-index':'10',
'color':'#ffffff'

});

$('#resultLoading .bg').height('100%');
$('#resultLoading').fadeIn(300);
$('.myBox').css('cursor', 'wait');
}

Answer

Your loader has a position of fixed, this takes the position of the viewport rather than the position of your element.

    $('#resultLoading>div:first').css({
        'width': '250px',
        'height':'75px',
        'text-align': 'center',
        'position': 'absolute',
        'top':'0',
        'left':'0',
        'right':'0',
        'bottom':'0',
        'margin':'auto',
        'font-size':'16px',
        'z-index':'10',
        'color':'#ffffff'

    });

    $('#resultLoading').css({
        'width':'100%',
        'height':'100%',
        'position':'absolute',
        'z-index':'10000000',
        'top':'0',
        'left':'0',
        'right':'0',
        'bottom':'0',
        'margin':'auto'
    });

Also give your myBox a position of relative.

Comments