jquery – How do I make a gif to animate in IE after it was hidden?

Please refer to the following code, it uses the .loader div to display the loading image, and use the CSS visibility property to show and hide the loading image (you could change it to CSS display property, and use “none” and “block” value to hide/show the image):

<style type="text/css">
    .contents{
      visibility:hidden;
    }
    .loader {
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid blue;
      border-right: 16px solid green;
      border-bottom: 16px solid red;
      border-left: 16px solid pink;
      width: 120px;
      height: 120px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }

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

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

<script type="text/javascript">
    document.onreadystatechange = function () {
        var state = document.readyState
        if (state == 'interactive') {
            document.getElementById('contents').style.visibility = "hidden";
        } else if (state == 'complete') {
            setTimeout(function () {
                document.getElementById('interactive');
                document.getElementById('load').style.visibility = "hidden";
                document.getElementById('contents').style.visibility = "visible";
            }, 2000);
        }
    }

    function LoadImage(){
         document.getElementById('load').style.visibility = "visible";
         setTimeout(function () {
                document.getElementById('interactive');
                document.getElementById('load').style.visibility = "hidden";
                document.getElementById('contents').style.visibility = "visible";
            }, 3000);
    }
</script>

<form id="form1" runat="server">
    <div id="load" class="loader"></div>
    <div id="contents" class="contents">
        This is testing
    </div>
    <input type="button" id="btnShow" value="Show Loader" onClick="LoadImage();">
</form>

The output as below (when page loads, it will display the loading image, after page load, if we click the Show Loader button, it will show the loading image and after 3 second, it will hide the image):

Reference:

How TO – CSS Loader

Display (Show) Loading Progress GIF Image when Page Loads in ASP.Net MVC