Q:

Animated loader gif not spinning

I have a simple html file with some javascript that takes some time to run, and I want to show an animated loader gif while the user is waiting.
The problem is that the animation does not work.
I tried some solution. Some of them from stack overflow, but nothing really worked.
I'm limited for using IE8 only.
Does someone knows of a solution that works well?
My code:
<html>
<head>
    <script type="text/javascript">
        function RunAndShow() {
            document.getElementById("circularG").style.display = "block";
            window.setTimeout(function () {
                var j = 0;
                for (var i = 0; i < 2000000000; i++) {
                    j = i;
                }
                alert("done");
            }, 1500);
        }
    </script>
</head>
<body>
    <div id="circularG" style="width:200px;height:200px;display:none; background-image:url(ajax-loader.gif)">
    </div>
    <table>
        <tr>
            <td>
                <a href="#" onclick="RunAndShow()">Run & Show</a>
            </td>
        </tr>
    </table>
</body>
</html>

A:

As you're having a long running for loop inside the RunAndShow the JS process becomes busy. So it blocks the UI thread in browser. It's expected behavior.
You can use webworkers to run long running computation. But as you are limited to IE8, it's not available.
One option is to use setInterval/setTimeout and do the heavy computation partially each time so that the UI thread doesn't block. 
    function RunAndShow() {

        document.getElementById("circularG").style.display = "block";

        window.setTimeout(function () {

            var computed = 0, process = 500, total = 10000000000, j;
            var interval = setInterval(function() {
                while(computed < process && process < total ) {
                    j = computed;
                    computed++;
                }
                process += 500;
                if(process >= total) {
                 clearInterval(interval);
                 alert("done");
                }
            }, 10); // increase the delay

        }, 1500);

    }

DEMO

