Question

我试图在等待AJAX响应的同时添加一个在浏览器窗口中间修复的加载器（spinner gif + text）。到目前为止，我设法正确定位了我的gif，但是在将文本锚定到加载程序时遇到了一些麻烦。

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>

我在ajax调用期间使用jquery显示和隐藏预加载器。我想将文本锚定到加载器的底部。在设计布局和css方面，我是一个前者，所以任何提示都会很大。谢谢！

Answer 1

＆＃13;

.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;
		left: 0;
		right:0;
		top:0;
		bottom: 0;
}
#preloader p{
	  position: absolute;
    left: 0;
    right: 0;
    bottom: 50%;
		/* top:0; */
    display: inline-block;
    text-align: center;
		margin-bottom: -5em;
}

＆＃13;

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

＆＃13;

以下是Demo

Answer 2

我会这样做：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;
}

preloader-wrapper 应该是position:fixed。实际预加载器内部应水平和垂直居中。其余部分在CSS中进行了评论。

将文本添加到固定预加载器

2 个答案: