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

try this function: i'v put an example here http://jsfiddle.net/XFd39/

var i=0;   
function f() {
if(i<=4)
 $('#a').append(".");
i++;
if(i==4){
    $('#a').html("");
    i=0;
}
setTimeout(f,500);
}
f();

Answer 2

Pure CSS solution

Demo: jsfiddle.net/feklee/D59P9

• HTML:

  Waiting<span class="dots"><span>.</span><span>.</span><span>.</span></span> for more.
  

• CSS:

  @keyframes dots-1 { from { opacity: 0; } 25% { opacity: 1; } }
  @keyframes dots-2 { from { opacity: 0; } 50% { opacity: 1; } }
  @keyframes dots-3 { from { opacity: 0; } 75% { opacity: 1; } }
  @-webkit-keyframes dots-1 { from { opacity: 0; } 25% { opacity: 1; } }
  @-webkit-keyframes dots-2 { from { opacity: 0; } 50% { opacity: 1; } }
  @-webkit-keyframes dots-3 { from { opacity: 0; } 75% { opacity: 1; } }
  
  .dots span {
      animation: dots-1 1s infinite steps(1);
      -webkit-animation: dots-1 1s infinite steps(1);
  }
  
  .dots span:first-child + span {
      animation-name: dots-2;
      -webkit-animation-name: dots-2;
  }
  
  .dots span:first-child + span + span {
      animation-name: dots-3;
      -webkit-animation-name: dots-3;
  }
  

WebKit-only alternative

Advantage: No nested tags. This means that the ellipsis could be put as content into an ::after pseudo element.

Demo: jsfiddle.net/feklee/vFT7W

• HTML:

  Waiting<span>...</span> for more.
  

• CSS:

  body {
      font-family: 'Roboto', sans-serif;
      font-size: 50px;
  }
  
  @-webkit-keyframes dots {
      0% { background-position: 0px; }
      100% { background-position: 50px; }
  }
  
  span {
      background: linear-gradient(to right, white 50%, black 50%);
      color: transparent;
      -webkit-background-clip: text;
      -webkit-animation: dots 1s infinite steps(4);
      padding-right: 40px;
      margin-right: -40px;
  }
  

Answer 3

The trick to making a string of dots is to make a sparse Array and then join all the elements with the desired character.

var count = 0;
setInterval(function(){
    count++;
    var dots = new Array(count % 10).join('.');
    document.getElementById('loadingtext').innerHTML = "Waiting for your input." + dots;
  }, 1000);

Here is a Live demo.

Answer 4

This can be very easy:

HTML

<span class="dots"></span>

JQuery

setInterval(function() {
    var th = $('.dots');
    if(th.text().length < 5){
        th.text(th.text()+".");
    }else{
        th.text("");
    }
}, 500);

Demo

Answer 5

Here is a modified version that will turn off the dots after a time.

var count = 0;
var dots = setInterval(function(){
  count++;
  document.getElementById('loadingtext').innerHTML = "Waiting for your input." + new Array(count % 5).join('.');

  if (count == 10){ // show two iterations of the array.
    clearInterval(dots); // stop the dots.
  }
}, 100); // sets the speed

http://jsfiddle.net/Ty4gt/331/

Answer 6

Here is a pretty simple variant: http://jsfiddle.net/psycketom/FusdC/

Read the comments below to understand what everything is doing there.

var span = $('.dots'); // take the element where you have the maximum count of dots
var text = span.text(); // cahce it's text value

// we set up a function here, so we can loop it all the time
var loading = function()
{
    $({
        count : 1 // we start at one dot
    }).animate({
        count : text.length // together forming all of it
    }, {
        duration : 1000, // make the animation complete in one second
        step : function() {
            span.text( text.substring(0, Math.round(this.count)) ); // on each step, change the text accordingly to current iteration
        },
        complete : function() {
            loading(); // once complete, start all over again
        }
    });
};

loading(); // start it up for the first time

Here you also gain the advantage of using easing if you wish, easily changing total duration and bunch of other benefits in case you're good with jQuery.