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

Posted 2023-02-19

【中文标题】将文本添加到固定预加载器

【英文标题】：Add text to fixed preloader

【发布时间】：2016-12-07 09:34:59

【问题描述】：

我正在尝试添加一个加载器（微调器 gif + 文本），该加载器在等待 AJAX 响应时固定在浏览器窗口的中间。到目前为止，我设法正确定位了我的 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 方面，我是一个初学者，所以任何提示都会很大。谢谢！

【参考方案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;
		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;

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

这里是Demo

【讨论】：

绝对定位包装器中的固定元素没有任何意义。您的 margin-bottom:-5em 也是不好的做法。 （我知道这是 OP 犯的错误，但您不必复制它。） 一旦在其中一个分层元素处增加字体大小，相对边距也会增加.当您开始添加多行文本或更多元素时，它会进一步向上游荡并与您的加载器图像重叠。 ...

【参考方案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。在实际的 preloader 内部应该水平和垂直居中。其余部分在 CSS 中注释。