Javascript 在字体图标下方添加文本

我有一个很棒的字体微调器，我正在测试。我希望在上面或下面有一行文本，理想情况下是一行（但仍然与引导集成）。下面的代码显示微调器下方的文本，但文本不在一行中。设置

微调器文本{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>

我使用以下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>

变量spinnerVisible=false；
$（document）.ready（函数（）{showSpinner（）}）；
函数showSpinner（）{
如果（！spinnerVisible）{
美元（“div#spinner”）.fadeIn（“fast”）；
自旋神经可视=真；
}
setTimeout（hideSpinner，4000）；
};
函数hideSpinner（）{
如果（可旋转）{
var微调器=$（“div#微调器”）；
spinner.stop（）；
微调器。淡出（“快速”）；
自旋神经可视=假；
}
};

我已经研究了以下问题，但没有找到解决方案：

---

您在示例中把它弄得太复杂了。它可以使用更简单的标记和CSS flexbox来完成，我建议使用固定位置而不是绝对位置，这样它就可以始终覆盖整个视口

var spinnerVisible=false；
$（文档）.ready（函数（）{
showSpinner（）
});
函数showSpinner（）{
如果（！spinnerVisible）{
美元（“div#spinner”）.fadeIn（“fast”）；
自旋神经可视=真；
}
setTimeout（hideSpinner，4000）；
};
函数hideSpinner（）{
如果（可旋转）{
var微调器=$（“div#微调器”）；
spinner.stop（）；
微调器。淡出（“快速”）；
自旋神经可视=假；
}
};
.spinner容器{
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
z指数：-1；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.spinner容器.fa{
字体大小：30px；
}

正在从…收集数据，请稍候。。。
您是否能够将代码转换为工作片段或演示。Thanks@sol下面是一个例子
<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>