Attach a script to a DIV While performing an AJAX request

Question

I have this script

<div id="div2">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
  <div class="bar4"></div>
  <div class="bar5"></div>
  <div class="bar6"></div>
</div>

<script>
function rotate() {
    var count = 0;
    var elem = document.getElementById('div2');
    elem.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem2.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem3.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem4.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem5.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem6.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem2.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem3.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem4.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem5.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem6.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    if (count==360) { count = 0 }
    count+=45;
    window.setTimeout(rotate, 10);
  }
</script>

Which combines with CSS creates a iOS style loading spinner animation. I did not write the script. If you would like to see it the link is here:

http://kilianvalkhof.com/uploads/spinners/

but my question is, i am perform an AJAX jQuery request and injecting the requested page into a DIV. I am trying to display this animation in the same DIV I am loading the page into while the page is being requested. The elements are styled but that should not matter for this. I just need to attach it. Can someone help me out with this?

Answer 1

You should be able to do something simple like this: http://www.jsfiddle.net/yijiang/ESnRS/3/

The basic concept is to make the spinner appear whenever the ajax request is called, then remove it when the request is complete. The basic structure would be something like:

$('#btn').click(function(){ // Trigger - this can be anything really
    var t = setTimeout(spinFunc, 100); // Let the spinner spin continously
    $('#spinner').fadeIn(); // Spinner appear

    $.ajax({
        success: function(){
            $('#spinner').fadeOut(300, function(){ // Spinner disappear
                clearTimeout(t); // Stopping the animation with it
            }); 
        }
    });
});

Answer 2

<div id="div2">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
  <div class="bar4"></div>
  <div class="bar5"></div>
  <div class="bar6"></div>
</div>
<script type="text/javascript">
var timer;
function rotate() {
    var count = 0;
    var elem = document.getElementById('div2');
    elem.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem2.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem3.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem4.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem5.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem6.style.MozTransform = 'scale(0.5) rotate('+count+'deg)';
    elem.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem2.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem3.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem4.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem5.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    elem6.style.WebkitTransform = 'scale(0.5) rotate('+count+'deg)';
    if (count==360) { count = 0 }
    count+=45;
    window.clearTimeout(timer);
    timer = window.setTimeout(rotate, 10);
  }
</script>