现有 DIV 中间的 Bootstrap Spinner

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 并尝试使用 position-absolute 类似的东西：

<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 中垂直和水平居中。

希望对你有帮助