Text zu festen Preloader hinzufügen

Question

Ich versuche, einen Loader (Spinner GIF + Text) hinzuzufügen, die in der Mitte des Browser-Fensters behoben wird, während auf eine AJAX-Antwort warten. Bis jetzt habe ich es geschafft, mein Gif richtig zu positionieren, aber ich habe ein paar Probleme, wenn es darum geht, den Text an den Loader zu verankern.

CSS:

.preloader-bg { 
    background: rgba(22, 22, 22, 0.3); 
    display: none; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 10; 
} 

#preloader { 
    background-image: url(images/preloader.gif); 
    background-repeat: no-repeat; 
    background-position: center; 
    position: fixed; 
    display: block; 
    left : 0; 
    bottom : 0; 
    right : 0; 
    top : 0; 
} 

HTML:

<div class="preloader-bg"> 
    <div id="preloader"> 
    </div> 
</div> 

ich zeigen und die preloader verstecken während Ajax-Aufrufe mit Jquery. Ich möchte den Text im unteren Teil des Loaders verankern. Ich bin ein Anfänger, wenn es um die Gestaltung von Layouts und CSS geht, so dass alle Tipps wäre riesig. Vielen Dank!

Answer 1

.preloader-bg { 
 
    background: rgba(22, 22, 22, 0.3); 
 
    /* display: none; */ 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 10; 
 
} 
 

 
#preloader { 
 
    background-image: url(http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    position: fixed; 
 
    display: block; 
 
\t \t left: 0; 
 
\t \t right:0; 
 
\t \t top:0; 
 
\t \t bottom: 0; 
 
} 
 
#preloader p{ 
 
\t position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 50%; 
 
\t \t /* top:0; */ 
 
    display: inline-block; 
 
    text-align: center; 
 
\t \t margin-bottom: -5em; 
 
}

<div class="preloader-bg"> 
 
    <div id="preloader"> 
 
\t \t \t <p>text here</p> 
 
    </div> 
 
</div>

Hier ist die Demo

Answer 2

ich es so tun würde: https://jsfiddle.net/kvduL2nj/

HTML

<div class="preloader-wrapper"> 
    <div class="preloader"> 
     Loading...<br/> 
     And whatever you want to have here. 
    </div> 
</div> 

CSS

.preloader-wrapper { 
    background: rgba(22, 22, 22, 0.3); 
    width: 100%; height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 10; 
} 

.preloader-wrapper > .preloader { 
    background: transparent url(https://graphiclineweb.files.wordpress.com/2013/10/ajaxloader.gif?w=604) no-repeat center top; 
    position: absolute; 
    min-width: 128px; /* image-width of loader */ 
    min-height: 128px; /* image-height of loader */ 
    box-sizing: border-box; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    padding-top: 148px; /* 128px image-height of loader + 20px margin */ 
    text-align: center; 
} 

Die preloader-Wrapper ist derjenige, der position:fixed sein sollte. Innerhalb der tatsächlichen Preloader sollte horizontal und vertikal zentriert sein. Der Rest ist im CSS kommentiert.