Punctuation loading “animation”, javascript?

Question

I\'m looking for a good way to display some punctuation loading \"animation\".

What I want is something like this:

This will display at second 1: \"Waiti         


        

Answer 1

Now sure how the code got out of hand, you could just do:

setInterval(function () {
  var span = $("#text-loader").children("span:eq(0)");
  var ellipsis = span.html();
  ellipsis = ellipsis + ".";
  if (ellipsis.length > 5) {
    ellipsis = ".";
  }
  span.html(ellipsis);
}, 1000);

<div id="text-loader">
  This will display at second 1: "Waiting for your input<span>.</span>
</div>

And as for the 1, you can swap that out with the number of periods.

Answer 2

Dude, unless you want to display this animation forever you will need a way to stop the animation, or?

Don't even think about global variables, this is JavaScript and it's got closures for that :)

<p>please wait<span id="wait"></span></p>

<input type="submit" id="start" value="start">
<input type="submit" id="stop" value="stop">

<script type="text/javascript">
    $(document).ready(function() {

        var animator = function($el) {
            var dotCount = 1;
            var started = true;
            return {
                "start" : function step() {
                    dotCount = (dotCount + 1) % 10;
                    $el.text(new Array(dotCount).join('.'));
                    if (started) {
                        setTimeout(step, 100);
                    }
                },
                "stop" : function() {
                    started = false;
                }
            }
        };

        var animatedWait = animator($("#wait"));

        $("#start").click(animatedWait.start);
        $("#stop").click(animatedWait.stop);
    });
</script>