Mário Tomé Mário Tomé - 3 years ago 121
jQuery Question

Add text below AJAX loading icon

I'm using jQuery to show http://ajaxload.info/ icon.

$(".modal").show();


<div class="modal"></div>


.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;
}


I want to add some text below the icon. I've tried having new div inside class="modal" div but it doesn't work because what I need is to add the text on the background.
How can I had text below the background image?

Answer Source

If it were me, I wouldn't use the background image. I would do something like this:

<style>
.modal {
    position: fixed;
    text-align:center;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba( 255,255,255, .8 ) 
}
.modal::before {
    margin: auto;
    display:block ;
    text-align: center;
    content: url('http://i.stack.imgur.com/FhHRx.gif');
}
</style>
<div class="modal"><p>Content loading</p></div>

Here' a working fiddle: https://jsfiddle.net/hsyprw2m/2/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download