7

What I need:

I need an animated elipisis (...), one dot appearing after the other. The animation needs to loop. I'd like to achieve this via jQuery

Animation sequence:

Frame 1: Awaiting your selection

Frame 2: Awaiting your selection .

Frame 3: Awaiting your selection ..

Frame 4: Awaiting your selection ...

What I've tried:

I've been researching a plugin to blink text and the pulsate .effect().

My question:

Does anyone have any reccomendations on the simplest and most reliable means of achieving this? I'd be happy to be pointed to a technique or function.

Dominor Novus
  • 2,248
  • 5
  • 29
  • 35

4 Answers4

18

If you just need the dots to appear one after another only once, try something very simple like the following:

<div id="message">Awaiting your selection</div>​

var dots = 0;

$(document).ready(function() {
    setInterval (type, 600);
});

function type() {
    if(dots < 3) {
        $('#message').append('.');
        dots++;
    }
}​

http://jsfiddle.net/fVACg/

If you want them to appear more than once (to be deleted and then re-printed), you can do something like the following:

<div>Awaiting your selection<span id="dots"></span></div>​

var dots = 0;

$(document).ready(function() {
    setInterval (type, 600);
});

function type() {
    if(dots < 3) {
        $('#dots').append('.');
        dots++;
    } else {
        $('#dots').html('');
        dots = 0;
    }
}​

http://jsfiddle.net/wdVh8/

Finally, checkout a tutorial I've written a few years ago. You might find it useful.

StathisG
  • 1,159
  • 1
  • 10
  • 18
  • Thanks for such a rigorous answer though I can't seem to reproduce the animation in my web page: http://tinyurl.com/8ppm9l7. I've changed the "$" symbol to "jQuery". Beyond this, the only thing I can think of is a potential conflict with other jQuery scripts. Does the setInterval function need to be limited to an element/event instead of my entire document? – Dominor Novus Oct 21 '12 at 10:52
  • I'd edited my question to clarify that the animation needs to be looping as per your second demo. – Dominor Novus Oct 21 '12 at 11:00
  • 2
    If you copied and pasted the code, go just after the last } and press your backspace once (or just copy everything but the last } and add it yourself). At the end there seems to be a strange invincible character, possibly carried after copying & pasting the code from jsFiddle. That should fix your problem. – StathisG Oct 21 '12 at 11:20
  • Wow, I wouldn't have guessed that. I was even skeptical/doubtful applying the fix but lo and behold it now works. Thanks again for such a thorough answer. I like the typing text animation effect at your tutorial that you linked to. – Dominor Novus Oct 21 '12 at 11:32
  • Disclaimer: Please keep in mind when using intervals that they will run until the interval is cleared. Thus, simply hiding the message will not stop the interval from running. You will need to stop it yourself. A common way of doing this is: var a = setInterval(type, 600); and then using clearInterval(a); to stop it. – Richard Chassereau Apr 01 '16 at 03:09
17

Beside StathisG's answer using jquery you can also achieve it through CSS3 using animation iteration count and animation-delay 

@-webkit-keyframes opacity {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@-moz-keyframes opacity {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

#loading {
    text-align: center; 
    margin: 100px 0 0 0;
}

#loading span {
    -webkit-animation-name: opacity;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: opacity;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
}

#loading span:nth-child(1) {
    -webkit-animation-delay: 100ms;
    -moz-animation-delay: 100ms;
}

#loading span:nth-child(2) {
    -webkit-animation-delay: 300ms;
    -moz-animation-delay: 300ms;
}

#loading span:nth-child(3) {
    -webkit-animation-delay: 500ms;
    -moz-animation-delay: 500ms;
}​

DEMO: http://jsfiddle.net/VXdhG/1/

Eli
  • 14,779
  • 5
  • 59
  • 77
  • 1
    Thank you for the CSS alternative and for showcasing the power and beauty of CSS. The overall effect is very sleek. My only concern with this approach is cross-browser support. – Dominor Novus Oct 21 '12 at 10:54
1

I've written a simple JQuery plugin for it: https://github.com/karbachinsky/jquery-DotAnimation

//<div class="element">Loading</div>

$(function () {
    // Animation will start at once
    var $el = $('.element');

    $el.dotAnimation({
        speed: 300,
        dotElement: '.',
        numDots: 3
    });
});

JSFiddle example: https://jsfiddle.net/bcz8v136/

Igor Karbachinsky
  • 375
  • 3
  • 8
0

The following code is essentially what I ended up with.

JavaScript: 

var animatedDot;
animatedDot = animatedDot || (function () {
    var dots = 0;
    var animatedDotInterval;
    var selectorAnimatedDot = ".animatedDot";

    return {
        start: function(interval) {
            if (!interval)
                interval = 400;

            animatedDotInterval = setInterval(this.nextFrame, interval);
        },
        stop: function() {
            if (animatedDotInterval)
                clearInterval(animatedDotInterval);
        },
        nextFrame: function() {
            if ($(selectorAnimatedDot).length) {
                if (dots < 3) {
                    $(selectorAnimatedDot).append('.');
                    dots++;
                } else {
                    $(selectorAnimatedDot).html('');
                    dots = 0;
                }
            } else {
                if (animatedDotInterval)
                    clearInterval(animatedDotInterval);
            }
        }
    };
})();

function animatedDotTimeout(timeout) {
    if (!timeout)
        timeout = 10000;

    animatedDot.start();

    setTimeout(animatedDot.stop, timeout);
}

Html: 

Loading<span class="animatedDot"></span>

<script type="text/javascript">
    $(document).ready(function() {
        animatedDot.start();
    });
</script>
Trent
  • 335
  • 2
  • 8