display loading animation when user clicked on an element until page loads

Question

I used the example from Jonathan from How can I create a "Please Wait, Loading..." animation using jQuery?. I don't use AJAX calls. Instead I use this firing event:

$("body").addClass("loading");
$("#select-place input").click(function(){
    $("body").addClass("loading");
});
$(window).bind("load", function() {
    $("body").removeClass("loading"); 
});

With the first line I get the animated icon in FF24 when the user clicks on my input element. But in IE10 the icon doesn't spin. What I'm doing wrong? I tried to preload the image but that doesn't change anything.

CSS:

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background-color: rgba( 255, 255, 255, .8 ) ;
    background-image: url(../images/design/loading.gif);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0.80;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
    filter: alpha(opacity = 80)
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

HTML:

<div class="modal"></div>

Why does the icon (gif) doesn't spin? I've tested all browser so far and it works except in IE...

Can we see your CSS please? You are adding a class to the body (odd) so the effect is presumably lower down the DOM hierarchy. — iCollect.it Ltd, Oct 02 '13 at 08:39
The HTML and the CSS are placed at the end of the documents. Should I change that? See my updated question for the CSS. — testing, Oct 02 '13 at 08:46

score 0 · Answer 1 · edited May 23 '17 at 11:57

The problem is described in Animated GIF in IE stopping. The problem exists for IE in general (even IE10). The solution is to use spin.js. For the centering in the middle of the screen I used this solution.

HTML:

<div id ="center" style="position:fixed;top:50%;left:50%"></div>

JS:

var opts = {
  lines: 13, // The number of lines to draw
  length: 8, // The length of each line
  width: 4, // The line thickness
  radius: 11, // The radius of the inner circle
  corners: 1, // Corner roundness (0..1)
  rotate: 0, // The rotation offset
  direction: 1, // 1: clockwise, -1: counterclockwise
  color: '#000', // #rgb or #rrggbb or array of colors
  speed: 1, // Rounds per second
  trail: 60, // 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
};
var target = document.getElementById('center');
var spinner = new Spinner(opts);

$("#select-place input").click(function(){
    spinner.spin(target);
});
$(window).bind("load", function() {
    spinner.stop();
});

display loading animation when user clicked on an element until page loads

1 Answers1