Spinner loader masking - bootstrap - with gif image

with bootstrap class 

 .spinner-grow{

           display: block;

              position: fixed;

              z-index: 1031; /* High z-index so it is on top of the page */

              top: 50%;

              right: 50%; /* or: left: 50%; */

        }

        .model {

            display: none;

            position: fixed;

            z-index: 1200;

            top: 0;

            left: 0;

            height:

100%;

            width: 100%;

            background: rgba( 255, 255, 255, .8 )  50% 50% no-repeat;

        }

<button type="button" value="test" onclick="$('#model').show();">dfdf</button>

    <div class="model" id="model" style="display: none;">

        <div class="spinner-grow" >

            </div>

    </div>

$('#model').hide(); to hide

=================================

without bootstrap using gif image(may be jquery is used)

 .model {

            display: none;

            position: fixed;

            z-index: 1200;

            top: 0;

            left: 0;

            height: 100%;

            width: 100%;

            background: rgba( 255, 255, 255, .8 ) url('../Assets/img/spinners/spinner_warning.gif') 50% 50% no-repeat;

        }

<div class="model" id="model" style="display: none;"></div>

$('#model').show();

$('#model').hide();

ref:- https://www.w3schools.com/howto/howto_css_loader.asp

https://stackoverflow.com/questions/49365372/how-to-center-a-spinner-horizontally-and-vertically-in-page

https://getbootstrap.com/docs/5.3/components/spinners/

https://www.w3schools.com/bootstrap5/bootstrap_spinners.php