Search code examples
htmltwitter-bootstrapspinnercenter

Bootstrap Spinner in middle of existing DIV

I am trying to add a loading indicator to the middle of an existing DIV layout, without changing the size of my div, and overlaying it while my AJAX request does its thing to load data for that portion of the screen. I get how to do the showing and hiding via the AJAX request, but where I am struggling is getting the proper HTML, CSS, or bootrstrap classes to show a spinner in the middle of the div.

A lot of the existing questions and answers show a spinner in the middle of the screen. That is not what I am doing, and I need this to be dynamic. In other words, if the screen changes sizes, I want the spinner to stay in the center of this particular DIV.

Here is an image of my screen:

enter image description here

And the HTML that generates it (just showing the HTML for the first block, there are 5 across the screen in the row):

   <!-- 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 -->

And here is what I want it to do during an AJAX request (mocked up in photoshop):

enter image description here

I've tried quite a bit to create my own spinners, add DIVs inside, hide the cardbody, but none of it seems to create the effect that I'm looking for. It is beyond my CSS abilities.

Any help would be greatly appreciated!

Solution

  • I use to do something like that : create a div inside your .card element and try something with position-absolute like that :

    <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>

    it could look like that :

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

    On this example, I'm always using bootstrap classes, so it should work on your side too.

    I'm adding .overflow-hidden to the .card element to not make the loading element overflow on .card border

    the d-flex flex-column align-items-center bg-white justify-content-center is here to center vertically and horizontally your loading element inside the div.