Bootstrap 现有 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">,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 中模拟）：

我已经尝试了很多来创建我自己的微调器，在里面添加 DIVs，隐藏卡体，但是 none 它似乎创造了我正在寻找的效果.这超出了我的 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

在这个例子中，我总是使用 bootstrap 类，所以它也应该对你有效。

我将 .overflow-hidden 添加到 .card 元素，以免加载元素溢出到 .card 边界

d-flex flex-column align-items-center bg-white justify-content-center 用于在 div.

中垂直和水平居中加载元素

Bootstrap 现有 DIV 中间的微调器

Bootstrap Spinner in middle of existing DIV

html

center

spinner

twitter-bootstrap