How can I load a image or text every time a page is submitted in MVC Asp? So, basically I don't want to repeat code in every page, I'd like to display a image or text when a form (no matters where into the app) is submitted, and/or a better way to let the users the page is loading.

here is the code in _layout.cshtml

<div class="spinner" style="display:none">
    <div class="center-div">
        <div class="inner-div">
            <div class="loader"></div>
        </div>
    </div>
</div>
@RenderBody()

this is the JavaScript I coded to capture all submit buttons:

<script>
    $(document).ready(function () {
        $(document.querySelectorAll("button[type=button]")).click(function () {
            $('.spinner').css('display', 'block');
        });
    });
</script>

And finally a simple CSS:

<style>
    .center-div {
        width: 300px;
        height: 300px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -150px;
        margin-top: -150px;
    }

    .spinner {
        position: fixed;
        z-index: 999;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background-color: Black;
        filter: alpha(opacity=60);
        opacity: 0.6;
        -moz-opacity: 0.8;
    }

    .loader {
        margin: auto;
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid #15a0ec;
        border-bottom: 16px solid #15a0ec;
        width: 120px;
        height: 120px;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }

    .inner-div {
        background-color: white;
        border-radius: 15px;
        margin: auto;
        padding: 2%;
        width: 150px;
    }

    @@-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @@keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>

I tried this but it's not working at all.

Thanks in advance.

How can I load a image or text every time a page is submitted in MVC Asp? So, basically I don't want to repeat code in every page, I'd like to display a image or text when a form (no matters where into the app) is submitted, and/or a better way to let the users the page is loading.

here is the code in _layout.cshtml

<div class="spinner" style="display:none">
    <div class="center-div">
        <div class="inner-div">
            <div class="loader"></div>
        </div>
    </div>
</div>
@RenderBody()

this is the JavaScript I coded to capture all submit buttons:

<script>
    $(document).ready(function () {
        $(document.querySelectorAll("button[type=button]")).click(function () {
            $('.spinner').css('display', 'block');
        });
    });
</script>

And finally a simple CSS:

<style>
    .center-div {
        width: 300px;
        height: 300px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -150px;
        margin-top: -150px;
    }

    .spinner {
        position: fixed;
        z-index: 999;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background-color: Black;
        filter: alpha(opacity=60);
        opacity: 0.6;
        -moz-opacity: 0.8;
    }

    .loader {
        margin: auto;
        border: 16px solid #f3f3f3;
        border-radius: 50%;
        border-top: 16px solid #15a0ec;
        border-bottom: 16px solid #15a0ec;
        width: 120px;
        height: 120px;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }

    .inner-div {
        background-color: white;
        border-radius: 15px;
        margin: auto;
        padding: 2%;
        width: 150px;
    }

    @@-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @@keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>

I tried this but it's not working at all.

Thanks in advance.

• javascript
• asp
• asp-mvc
• model-view-controller

1 Answer 1

In case of Ajax Form Submit :

$(document).ajaxSend(function (event, xhr, options) {

     $('.spinner').css('display', 'block');

}).ajaxComplete(function (event, xhr, options) {    

    $('.spinner').css('display', 'none');

}).ajaxError(function (event, jqxhr, settings, exception) {    

     $('.spinner').css('display', 'none');

});

This will handle loader in all your Ajax calls.

In case when you want to show loader until the page is loaded pletely then :

First, remove "display:none" from your spinner div

  <div class="spinner">
        <div class="center-div">
            <div class="inner-div">
                <div class="loader"></div>
            </div>
        </div>
    </div> 

and then in JS :

<script>
        $(window).on('load', function () {
            $('.spinner').css('display', 'none');            
        });
</script>