Show loading progress GIF image when Page Loads in ASP.Net MVC

Last Reply one year ago By Mudassar

Posted one year ago

Hi,

Please let me know how to display loading progress GIF image when Page (View) is loading in ASP.Net MVC Razor?

I am on with JavaScript and jQuery code.

Posted one year ago Modified on one year ago

Do it using plain JavaScript

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

    <style type="text/css">
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            background-color: black;
            z-index: 99;
            opacity: 0.8;
            filter: alpha(opacity=80);
            -moz-opacity: 0.8;
            min-height: 100%;
            width: 100%;
        }

        .loading {
            font-family: Arial;
            font-size: 10pt;
            border: 5px solid #67CFF5;
            width: 200px;
            height: 100px;
            display: none;
            position: fixed;
            background-color: White;
            z-index: 999;
        }
    </style>
</head>
<body>
    <div class="loading" align="center">
        Loading. Please wait.<br />
        <br />
        <img src="https://www.aspsnippets.com/demos/loader.gif" alt="" />
    </div>
    <script type="text/javascript">
        var modal, loading;
        function ShowProgress() {
            modal = document.createElement("DIV");
            modal.className = "modal";
            document.body.appendChild(modal);
            loading = document.getElementsByClassName("loading")[0];
            loading.style.display = "block";
            var top = Math.max(window.innerHeight / 2 - loading.offsetHeight / 2, 0);
            var left = Math.max(window.innerWidth / 2 - loading.offsetWidth / 2, 0);
            loading.style.top = top + "px";
            loading.style.left = left + "px";
        };
        ShowProgress();
    </script>
    
    <!-- Keep the Page Content Here.-->

    <script type="text/javascript">
        window.onload = function () {
            setTimeout(function () {
                document.body.removeChild(modal);
                loading.style.display = "none";
            }, 2000);
        };
    </script>
</body>
</html>

Demo