Entirely Javascript Ajax spinner?

Question

I was thinking that Ajax spinners are really great but the image spinning is actually shown with some delay OR is loaded too early, I thought maybe I could use these old school characters to provide more accurate ajax activity feedback.
|, /, —, \

lets say the target paragraph is called <p id="target"></p> How can I interchange these characters in that paragraph without it being too resource intensive, I have JQuery already loaded in the project.

Thanks so much guys!

Answer 1

This allows you to have event multiple loading indicators in the same time. Just store them in a variable and call stop() when they are no longer needed.

[See it in action]

function loader(el, delay) {
  if (typeof el === "string")
    el = document.getElementById(el);
  if (!el) 
    return;
  delay = delay || 100;
  var chars = "|/-\\".split("");
  var i = 0;
  var timer = setInterval(function(){
    el.innerHTML = chars[ i++ % chars.length ];
  }, delay);
  // public method to stop the animation
  this.stop = function() {
    clearInterval(timer);
  }
}


// make a new loader and start animation
var ld1 = new loader("loader"); // or loader($("#loader")[0]); 

// content is loaded stop animation
ld1.stop();

Answer 2

From the very page:

• No images, no external CSS
• No dependencies (jQuery is supported, but not required)
• Highly configurable
• Resolution independent
• Uses VML as fallback in old IEs
• Uses @keyframe animations, falling back to setTimeout()
• Works in all major browsers, including IE6
• MIT License

http://fgnass.github.com/spin.js/