JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.geekstocks.com/mods/js/spin.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <title>Spinner Stops Spinning in Chrome and IE, FF is ok</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    </head>
    <body>
        <div id="myButton">Start<br>AJAX</div>
        <div id="foo"></div>
        <div id="bar"></div>
        <div id="resetButton">Reset Test</div>
    </body>
</html>

CSS

#foo {height: 80px; width: 80px;}

#bar {width: 200px; height: 100px; overflow: hidden; border: 1px solid black;}

#myButton {width: 100px; height: 40px; background-color: green; text-align: center; cursor: pointer;}

#resetButton{width: 100px; height: 40px; background-color: gray; text-align: center; cursor: pointer;}

JavaScript

/*

THIS PROLEM IS SOLVED.  THE AJAX CALL I WAS USING
HAD async: false SET SO THAT IT WOULD BLOCK.  THIS
WAS STOPPING CHROME AND IE BUT NOT FF.

AFTER CHANGING TO async: true THE PROBLEM RESOLVED

This is pretty much the exact example code from
http://fgnass.github.com/spin.js/

*/

var opts = {
  lines: 13, // The number of lines to draw
  length: 7, // The length of each line
  width: 4, // The line thickness
  radius: 10, // The radius of the inner circle
  corners: 1, // Corner roundness (0..1)
  rotate: 0, // The rotation offset
  color: '#000', // #rgb or #rrggbb
  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('foo');
var spinner = new Spinner(opts).spin(target);

// bind an ajax call to the green box

$("#myButton").click(function() {
    $.ajax({
        url: '/echo/html/',
        async: true, // false shows problem, TRUE RESOLVES ISSUE
        data: {
            html: "<p>AJAX data call complete</p>",
            delay: 3 // seconds, so we can see spinner stoppage
        },
        success: function(data) {
            $("#bar").html("AJAX call has returned");
        }
    });
});

$("#resetButton").click(function() {
    $("#bar").html("");
});

// and now, we see the spinner doing its thing.
    
/*
    NOW, click the green box to start the AJAX call.
    WAIT 3 seconds.
    You will get varied results depending on your browser.
    
    In Firefox (16.0.2) it works fine.
    
    In Chrome (Version 23.0.1271.64 m) the spinner animation stops during the AJAX call

    In IE (9.0.8112.16421 64-bit edition) the spinner animation stops during the AJAX call

...