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!

I see you already have an answer, but I thought I'd add that I wrote a plugin that can animate bullets: http://wowmotty.blogspot.com/2010/06/dynamic-progress-indicator.html — Mottie, Jul 10 '10 at 13:53

gblazex · Answer 1 · 2010-07-10T12:38:11.480

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();

score 2 · Accepted Answer · edited Mar 29 '12 at 08:08

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/

edited Mar 29 '12 at 08:08

cha0site

10,517
3
33
51

answered Mar 29 '12 at 06:58

Tudor Ilisoi

2,934
23
25

Lucas Jones · Answer 3 · 2010-07-10T11:56:40.050

Maybe something like:

function change(areDoneYet) {
    var realFun = (function(doneYet) {
        var chars = "|/-\\";
        var el = $('#target'); // I think that's the JQuery way
        var current = el.innerHTML;
        var changeTo = "";

        if (current == "") changeTo = chars.charAt(0);
        else
            changeTo = chars.charAt(chars.indexOf(current) % chars.length);

        el.innerHTML = changeTo;

        if (!areDoneYet())
            setTimeout(realFun, 100, doneYet);
    });
    realFun(areDoneYet);
    if (!areDoneYet())
       setTimeout(realFun, 100, areDoneYet);
}

Meh. It's a bit inelegant. It takes a callback which returns whether it should stop.

score 1 · Answer 4 · answered Jul 10 '10 at 11:57

1

Mohammad - loading the image in a 'hidden' div would resolve the delay on loading the image. however, i guess your question is more a curiousity about alternatives to an image, rather than resolving the delay per se..

answered Jul 10 '10 at 11:57

jim tollan

22,305
4
49
63

true true haha, i actually thought of the hidden solution last night, but i forgot about it this morning. I'm still looking at this option since it could possibly allow a corollary between spinner speed and results. – Mohammad Jul 10 '10 at 12:02

score 1 · Answer 5 · edited Jun 20 '20 at 09:12

1

demo

var str = '|/—\\';    
var target = $('#target');
var x = 0;
setInterval(function(){
    target.text(str.charAt((x++)%str.length))
},5000)

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 10 '10 at 12:02

Reigel Gallarde

64,198
21
121
139

Entirely Javascript Ajax spinner?

5 Answers5

[See it in action]

demo