Hi,

I have a requirement after a user goes to page X which takes a while to load, to show a spinner.   I have an issue trying to solve this with basic JavaScript (see below).  Can JQuery help here?

Details of my current problem:   It seems when I use "window.location" as a means to redirect to the API when my longer running transaction is does not ensure the animation for the spinner gif I have works. ie. I see the gif ok but it not being animated. Is there another way in Javascript to force the redirect once the gif animation starts?

1. <div id="loading">
2. </div>
3. <script type="text/javascript" charset="utf-8">
4.    function show_spinner() {
5.      $("form").hide()
6.      $("loading").show()
7.      window.location = "/weekends/display"   # <== SEEMS TO STOPSPINNER ANIMATION
8.     }
9.    window.onload=show_spinner;
10. </script>

CSS

1. #loading {
2.   width:100px;
3.   height: 100px;
4.   position: fixed;
5.   top: 50%;
6.   left: 50%;
7.   background:url(/images/ajax-loader.gif) no-repeat center #fff;
8.   text-align:center;
9.   padding:10px;
10.   font:normal 16px Tahoma, Geneva, sans-serif;
11.   # border:1px solid #666;
12.   margin-left: -50px;
13.   margin-top: -50px;
14.   z-index:2;
15.   overflow: auto;