[英]Add text below font-awesome icon
我有一个正在测试的超棒的微调器。 我想在其上方或下方放置一行文本,理想情况下是一行(但仍与引导程序集成)。 下面的代码将文本显示在微调器下方,但该文本不是一行。 设置spinner-text{width}
属性可以将其放在一行上,但是当窗口大小更改时,它不位于图标的中心,也不使用引导程序调整其大小。
我的HTML:
<div class="center-parent" id="spinner">
<div class="center-container">
<i class="fa fa-cog fa-spin"></i>
<span class="spinner-text">Please wait while we gather data from wherever...</span>
</div>
</div>
我的CSS:
.center-parent {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.center-container {
width: 0 auto;
height: 0 auto;
font-size: 40px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-right: 0;
margin-bottom: 0;
margin-left: -30px;
z-index: -1;
}
.spinner-text {
margin: 0 auto;
display: table;
width: 100%;
height: 0 auto;
font-size: 20px;
position: absolute;
text-align: center;
}
我使用以下JavaScript测试微调器:
<script type="text/javascript">
var spinnerVisible = false;
$(document).ready(function () { showSpinner() });
function showSpinner() {
if (!spinnerVisible) {
$("div#spinner").fadeIn("fast");
spinnerVisible = true;
}
setTimeout(hideSpinner, 4000);
};
function hideSpinner() {
if (spinnerVisible) {
var spinner = $("div#spinner");
spinner.stop();
spinner.fadeOut("fast");
spinnerVisible = false;
}
};
</script>
我调查了以下内容,但未找到解决方法:
您在示例中使其变得过于复杂。 可以使用更简单的标记和CSS flexbox完成此操作,我建议使用固定位置而不是绝对位置,因此它始终可以覆盖整个视口。
var spinnerVisible = false; $(document).ready(function() { showSpinner() }); function showSpinner() { if (!spinnerVisible) { $("div#spinner").fadeIn("fast"); spinnerVisible = true; } setTimeout(hideSpinner, 4000); }; function hideSpinner() { if (spinnerVisible) { var spinner = $("div#spinner"); spinner.stop(); spinner.fadeOut("fast"); spinnerVisible = false; } };
.spinner-container { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; display: flex; flex-direction: column; justify-content: center; align-items: center; } .spinner-container .fa { font-size: 30px; }
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="spinner-container" id="spinner"> <i class="fa fa-cog fa-spin"></i> <span class="spinner-text">Please wait while we gather data from ...</span> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.