title: How to have an animated gif during the page transition?
body: <p>The project uses Backbone.js.</p>
  
  <p>I tried doing it by appending a div with a gif to the html body.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>startLoadingAnimation = function() {
    $("&lt;div id='loading'&gt;&lt;/div&gt;").appendTo("body"); 
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#loading {
    display:    block;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 0, 0, 0, .8 ) 
      url('../img/loading.gif') 
      50% 50% 
      no-repeat;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>It listens to an on-click event. </p>
  
  <p>Everything goes as expected but the loading gif doesn't run the animation. I suspect it's because the browser is making a page request or something, so the gif doesn't run or stops running. Is there anyway around it, or a better way to put a "loading" animation in page transitions?</p>
  
  <p>Any help or hint would be appreciated. Thanks in advance.</p>