How to display loading dialog when someone clicks a specific link?

Question

I do have an URL which opens a webpage which is very slow to load and I have no control over it.

I do want to display a loading dialog when someone clicks this URL or to

Answer 1

If you also need an animation, it becomes a complicated matter as browsers behave very differently. Some stop all GIF animations when a new page starts loading. Basically it comes down to something like this if you have jQuery and download the spin.js library.

See working solution here:

http://jsfiddle.net/7aJyP/

<style>
#loading {
    display:none;
    position:absolute;
    left:0;
    top:0;
    z-index:1000;
    width:100%;
    height:100%;
    min-height:100%;
    background:#000;
    opacity:0.8;
    text-align:center;
    color:#fff;
}

#loading_anim {
    position:absolute;
    left:50%;
    top:50%;
    z-index:1010;
}
</style>



<div id="loading"><div id="loading_anim"></div></div>

<a href="http://pangoo.it" class="mylinkclass withanimation">link</a>



<script>

$(function () {
    $(".withanimation").click(function(e) {
        e.preventDefault();
        $("#loading").show();

        var url=$(this).attr("href");

        setTimeout(function() {
            setTimeout(function() {showSpinner();},30);
            window.location=url;
        },0);

   });
});

function showSpinner() {
    var opts = {
      lines: 15, // The number of lines to draw
      length: 3, // The length of each line
      width: 4, // The line thickness
      radius: 30, // The radius of the inner circle
      rotate: 0, // The rotation offset
      color: '#fff', // #rgb or #rrggbb
      speed: 2, // Rounds per second
      trail: 70, // Afterglow percentage
      shadow: false, // Whether to render a shadow
      hwaccel: false, // Whether to use hardware acceleration
      className: 'spinner', // The CSS class to assign to the spinner
      zIndex: 2e9, // The z-index (defaults to 2000000000)
      top: 'auto', // Top position relative to parent in px
      left: 'auto' // Left position relative to parent in px
    };
    $('#loading_anim').each(function() {
        spinner = new Spinner(opts).spin(this);
    });
}
</script>

If you use an animated (GIF) the animation may freeze on some browsers. I used spin.js library ( http://fgnass.github.com/spin.js/ ). While GIFs get frozen the javascript animation seems to be working.

Please test with ALL browsers!

Answer 2

You can do this :

$(function(){
​  $('a').click(function(){
     $('<div class=loadingDiv>loading...</div>').prependTo(document.body); 
  });​
});

Demonstration (change the link to a very slow page for best effect)

But it depends on the page : if the page sends immediately some content but not the whole content, you won't have the time to see your div.