AJAX spinner freezes in firefox

Question

The GIF file/AJAX spinner that i have is working fine on IE, Safari and Chrome. When i run the same code in Firefox, the spinner spins for sometime and becomes static/freezes until the next page is loaded. What am i missing here?

Here is the JS and CSS

  .ajaxspinner {
        display: none;
        overflow: hidden;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
        -webkit-overflow-scrolling: touch;
        outline: 0;
        opacity: 0.8;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('../ajaxspinner.gif');
    }


function SendData(){
    $('.ajaxspinner').show();

    var message = "";
    var sendDataTostudent= {
        studentid: sID,
    }
    if (message.length == 0) {

        $.ajax({

            url: window.location.href,
            type: "POST",
            context: this,
            data: sendDataTostudent 
            dataType: 'json',

            success: function (data) {


                    window.location.href = data.Url;

            },
            error: function (data) {
                  $('.ajaxspinner').hide();

            }
        });
    } else {
           $('.ajaxspinner').hide();
    }
};

The issue is not with the visibility of GIF. It becomes static for few seconds before redirecting to the next page. — Yoda, Sep 25 '17 at 22:07

score 0 · Answer 1 · answered Aug 17 '20 at 12:53

To avoid issues like this I wouldn't use a gif, I would use pure css and css animation as these are much lighter than an image file.

Example with html and css only; https://jsfiddle.net/kxyb7w5p/

/* HTML */
<div id='ajax'>
<div id='ajax-spinner'></div>
</div>

/* CSS */
html {background:#000;}
#ajax {position:fixed; width:100%; height:100%; z-index:1000;}
#ajax-spinner {position:absolute; width:50px; height:50px; background:transparent; border:4px solid #00a8ff; border-top-color:#fff; border-radius:50px; left:50%; top:50%; margin-top:-25px; margin-left:-25px; animation:spinner 1s linear infinite;}

@keyframes spinner {
to {transform:rotate(360deg);}
}

AJAX spinner freezes in firefox

1 Answers1