How to add text above spinning gif during Ajax call/HTML blocking

Question

I found an excellent solution here to add a spinning GIF during a long (8-12sec) Ajax call, but I can't figure out how to vertically centre some text just above the GIF that will remain in the same relative position no matter the screen size.

Here's what I have so far:

<style>
    /* 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 */
    .modalLoading {
        display:    none;
        position:   fixed;
        z-index:    1000;
        top:        0;
        left:       0;
        height:     100%;
        width:      100%;
        text-align: center;
        background: rgba( 255, 255, 255, .8 ) 
                    /*url('https://i.stack.imgur.com/FhHRx.gif') */
                    url('<?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?>')
                    50% 50% 
                    no-repeat;
    }

    /* When the body has the loading class, we turn
       the scrollbar off with overflow:hidden */
    body.loading .modalLoading {
        overflow: hidden;   
    }

    /* Anytime the body has the loading class, our
       modal element will be visible */
    body.loading .modalLoading {
        display: block;
    }
    .modalFont {
        color:#8B0000;
        font-size: 20px;
        font-weight:900;
        font-family: 'Roboto', sans-serif;
    }

</style>

This DIV is at the bottom of my body section:

<div class="modalLoading">
    <div style="margin-top:25px">           
        <span class="modalFont">Please wait while we generate your entry form, including the PDF copy.<br />
        Do not click the back button or close this browser tab.</span>            
    </div>
</div>

What it looks like now:

What I want it to look like:

EDIT Trying the code from doesn't yield the desired results.

    /* 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 */
    .modalLoading {
        display:    none; /* if this is set to 'Flex' then the modal blocking appears on page refresh */
        position:   fixed;
        /*z-index:    1000;*/
        top:        0;
        right:      0;
        bottom:     0;
        left:       0;
        /*height:     100%;
        width:      100%;*/
        align-items: center;
        justify-content: center;
        background: rgba( 255, 255, 255, .8 ) 
                    /*url('https://i.stack.imgur.com/FhHRx.gif') */
                    url('<?php echo BASE_HDR_TAG . "contest/common/img/ajax-loader-red.gif"; ?>')
                    50% 50% 
                    no-repeat;
    }

    /* When the body has the loading class, we turn
       the scrollbar off with overflow:hidden */
    body.loading .modalLoading {
        overflow: hidden;   
    }

    /* Anytime the body has the loading class, our
       modal element will be visible */
    body.loading .modalLoading {
        display: block;
    }

    .modalFont {
        color:#8B0000;
        font-size: 20px;
        font-weight:900;
        font-family: 'Roboto', sans-serif;
        text-align: center;
        margin-top: 100px;
    }

<div class="modalLoading">         
    <span class="modalFont">Please wait while we generate your entry form, including the PDF copy.<br />
    Do not click the back button or close this browser tab.</span>            
</div>

EDIT 2 /* 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 */ .modalLoading { display: flex; position: fixed; /z-index: 1000;/ top: 0; right: 0; bottom: 0; left: 0; /height: 100%; width: 100%;/ align-items: center; justify-content: center; background: rgba( 255, 255, 255, .8 ) /*url('https://i.stack.imgur.com/FhHRx.gif') */ url('') 50% 50% no-repeat; }

    /* When the body has the loading class, we turn
       the scrollbar off with overflow:hidden */
    body.loading .modalLoading {
        overflow: hidden;   
    }

    /* Anytime the body has the loading class, our
       modal element will be visible */
    body.loading .modalLoading {
        display: flex;
    }

    .modalFont {
        color:#8B0000;
        font-size: 20px;
        font-weight:900;
        font-family: 'Roboto', sans-serif;
        text-align: center;
        margin-top: 100px;
    }

ReSedano · Accepted Answer · 2018-06-16T06:03:21.650

To center vertically a text, a possible solution is to use flexbox. With this HTML:

<div class="modalLoading">

        <span class="modalFont">Please wait while we generate your entry form, including the PDF copy.<br />
        Do not click the back button or close this browser tab.</span>            

</div>

You can write this CSS:

.modalLoading{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba( 255, 255, 255, .8 ) url('https://i.stack.imgur.com/FhHRx.gif')  50% 50% no-repeat;

}

.modalFont{
    margin-top: 100px; /* margin to move the text a little lower than gif loader. Change this margin with -100px if you want it to appear above the gif */
    text-align: center;
}

EDIT 1

To work only after AJAX call, I only edited CSS the previous HTML I wrote doesn't change:

.modalLoading {
        display:    none; /* hidden when refresh the page */
        position:   fixed;
        z-index:    1000;
        top:        0;
        right:      0;
        bottom:     0;
        left:       0;

        /*height:     100%;
        width:      100%;*/
        align-items: center;
        justify-content: center;
        background: rgba( 255, 255, 255, .8 ) 
                    url('https://i.stack.imgur.com/FhHRx.gif') 
                    50% 50% 
                    no-repeat;
    }


    body.loading .modalLoading {
        overflow: hidden;   
    }


    body.loading .modalLoading {
        display: flex; /*display using Flexbox */
    }

    .modalFont{
    margin-top: 100px; /* margin to move the text a little lower than gif loader. Change this margin with -100px if you want it to appear above the gif */
    text-align: center;
}

That doesn't work. By changing display to flex, the modal blocking shows when I refresh the page, and not just when an Ajax call is invoked from my JS. Also, the text is not centered horizontally or vertically. I edited my question to show the result. — RossW, Jun 15 '18 at 21:27
Have you tried to change `body.loading .modalLoading {display: block; }` in `body.loading .modalLoading {display: flex; }`? — ReSedano, Jun 15 '18 at 22:32
I did, and now the text is centered correctly, but it still shows up when refreshing the page and **NOT** just when an Ajax call is made. — RossW, Jun 15 '18 at 23:10
Indeed it does! What's different in that demo compared to what you have above? I can't mark yours as the answer unless it's updated. — RossW, Jun 16 '18 at 01:44

How to add text above spinning gif during Ajax call/HTML blocking

1 Answers1