Transparent Background (Modal Loader)

Quick post. I want to show a loader, that block the whole page and it should not be closeable, while waiting for AJAX response. I use modal and loader image then I set the modal background to transparent.

To do it, I read from this link_1 and link_2.

 
<div class="modal fade" id="loaderModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="background-color:rgba(0, 0, 0, 0.0);">
            <div class="modal-body">
                //replace with gif loader image
                <div class="loader dual-loader mx-auto"></div>
                <div class="row">
                    <div class="col-xl-12 col-md-12 col-sm-12 col-12" style="text-align:center; color:black">Loading...</div>
                </div>
            </div>
        </div>
    </div>
</div>