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

Last Reply on Jun 26, 2018 04:40 AM By Mudassar

Posted on Jun 26, 2018 04:39 AM

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 on Jun 26, 2018 04:40 AM Modified on on Jun 26, 2018 04:41 AM

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