Preload loader for Views in Asp.Net MVC

How to make Asp.Net MVC have the feature while loading the page has a Load image and after loading all the content.

I need this feature in Asp.Net MVC because this application is loaded in a WebView Xamarin Forms, and I realize that I must have this feature because there are moments that it takes to load and the user thinks that the application has crashed, so I should put a pre loader so as to give the user an idea that the application is loading.

The code below that I'm using is working, BUT the problem is that the Loading image only appears at the beginning of loading the other page.

This is

Clicking on any button starts the request without loading image.

When the @RenderBody () receives the other page then the preloader image appears.

What is correct is to click the system feedback as soon as possible to the user that the system is initiating the loading process.

CSS configuration

/*Preloader*/
div#container-loading {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    background-color: #fff;
}

div#preloader {
    z-index: 9999;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    background-image: url('Imagens/Site/load.gif');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

HTML configuration

<div id="container-loading">

    <div id="preloader"></div>

    @RenderBody() @*TODAS ÀS PÁGINAS DO SISTEMA CARREGAM AQUI*@

</div>

JQuery configuration

jQuery(window).on('load', function () {
    jQuery("#preloader").delay(1000).fadeOut("slow");
});

I'm not using this code below because I did not succeed.

  

I've tried this encoding but I did not succeed.

     

I created a javascript and mapped this function in the Bundle

     

Bundle

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
      "~/Scripts/jquery-{version}.js", 
      "~/Scripts/preloader.js"));

     

Javascript

<script type="text/javascript">

    $(document).ready(function () {
        function showAjaxLoader() {
            //find ajax loader div tag
            var loaderDiv = $("#__AjaxLoader");
            if (loaderDiv.length === 0) {
                //create ajax loader div tag, if not present
                loaderDiv = $("&lt;div /&gt;")
                .attr("id", "__AjaxLoader")
                .css("position", "absolute")
                .css("display", "block")
                .css("z-index", "10000")
                .addClass("ajaxLoader");
                loaderDiv.appendTo("body");
            }

            //center ajax loader div tag in the browser window
            var doc = $(document);
            loaderDiv.css('top', (doc.height() - loaderDiv.height()) / 2);
            loaderDiv.css('left', (doc.width() - loaderDiv.width()) / 2);

            //show it
            loaderDiv.show();
        }

        function hideAjaxLoader() {
            //hide ajax loader div tag, if present
            $("#__AjaxLoader").hide();
        }

        //Initiate delay loading asynchronously
        showAjaxLoader();
        $.get('@Url.Action("LoadContents")', function (data) {
            $("#delayLoadedContents").html(data);
            hideAjaxLoader();
        });
    });

</script>

     

And I inserted in the    Site.css

.ajaxLoader
{
    outline-style: none;
    outline-color: invert;
    outline-width: 0px;
    width:24px;
    height:24px;
    background-image: url("ajax-loade.gif");
}