Bootstrap Spinner 位于现有 DIV 中间

Question

我正在尝试将加载指示器添加到现有 DIV 布局的中间，而不更改 div 的大小，并在我的 AJAX 请求为屏幕的该部分加载数据时覆盖它。我知道如何通过 AJAX 请求进行显示和隐藏，但我遇到的困难是获取正确的 HTML、CSS 或 bootrstrap 类来在 div 中间显示旋转器。

许多现有的问题和答案都会在屏幕中间显示一个旋转器。这不是我正在做的事情，我需要让它充满活力。换句话说，如果屏幕大小发生变化，我希望旋转器保持在这个特定 DIV 的中心。

这是我的屏幕图像：

以及生成它的 HTML（仅显示第一个块的 HTML，屏幕上一行中有 5 个）：

   <!-- Reveneue YTD --> 
        <div class="col-md-2 col-sm-12">
            <div class="card">
                <div class="card-body">
                    <div class="float-right">
                        <i class="mdi mdi-currency-usd widget-icon"></i>
                    </div>
                    <h5 class="text-muted font-weight-normal mt-0" title="Sales"><a href="pipeline.php" class="text-body">Sales</a><sup><a href="javascript:void(0);" id="" data-toggle="tooltip" title="" data-original-title="Year-to-date Sales."><i class="mdi mdi-map-marker-question-outline text-success"></i></a></sup></h5>
                    <h3 class="mt-3 mb-3">$56,327</h3>
                    <p class="mb-0 text-muted">
                        <span class="text-success mr-2"><i class="mdi mdi-arrow-up-bold"></i> 9.00%</span>
                        <span class="text-nowrap">Since last month</span>
                    </p>
                </div> <!-- end card-body-->
            </div>
        </div> <!-- END Reveneue YTD --> 

这是我希望它在 AJAX 请求期间执行的操作（在 Photoshop 中模拟）：

我已经尝试了很多创建自己的旋转器、在内部添加 DIV、隐藏卡片主体，但似乎都没有产生我正在寻找的效果。这超出了我的 CSS 能力。

任何帮助将不胜感激！

Answer 1

我曾经做过类似的事情：在.card元素内创建一个 div 并尝试使用绝对位置的方法，如下所示：

<div class="row">
    <div class="col-md-2 col-sm-12">
        <div class="card position-relative overflow-hidden">
            <div class="card-body">...</div>
            <div class="position-absolute w-100 h-100 d-flex flex-column align-items-center bg-white justify-content-center">
                <div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>
            </div>
        </div>
    </div>
</div>

它可能看起来像这样：

https://codepen.io/pof/pen/VwbVJex

在此示例中，我始终使用引导类，因此它也应该适用于您。

我添加.overflow-hidden到.card元素中是为了不使加载元素在.card边框上溢出

在d-flex flex-column align-items-center bg-white justify-content-center这里，您的加载元素在 div 内垂直和水平居中。