Точка dotdot dotdotdot как загрузка в JS?

Ответ 1

<span id="wait">.</span>

<script>
var dots = window.setInterval( function() {
    var wait = document.getElementById("wait");
    if ( wait.innerHTML.length > 3 ) 
        wait.innerHTML = "";
    else 
        wait.innerHTML += ".";
    }, 100);
</script>

Или вы можете получить фантазию и заставить их идти вперед и назад:

<span id="wait">.</span>

<script>
    window.dotsGoingUp = true;
    var dots = window.setInterval( function() {
        var wait = document.getElementById("wait");
        if ( window.dotsGoingUp ) 
            wait.innerHTML += ".";
        else {
            wait.innerHTML = wait.innerHTML.substring(1, wait.innerHTML.length);
            if ( wait.innerHTML === "")
                window.dotsGoingUp = true;
        }
        if ( wait.innerHTML.length > 9 )
            window.dotsGoingUp = false;



        }, 100);
    </script>

Или вы можете заставить их идти туда и обратно в случайном порядке:

<span id="wait">.</span>

<script type="text/javascript">
    var dots = window.setInterval( function() {
        var wait = document.getElementById("wait");
        if ( Math.random() < .7 )
            wait.innerHTML += ".";
        else
            wait.innerHTML = wait.innerHTML.substring(1, wait.innerHTML.length);
        }, 100);
</script>

Или я мог бы получить жизнь и прекратить публикацию дополнительных фрагментов....: D

Как сказал Иво в комментариях, в какой-то момент вам нужно очистить интервал, особенно если вы не загружаете новую страницу после завершения ожидания.: D

Ответ 2

Или.. вы можете сделать это с помощью CSS;)

<p class="loading">Loading</p>

.loading:after {
  content: ' .';
  animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: white;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 white;}}

Пример Codepen

Ответ 3

Пример: http://jsfiddle.net/subTZ/

var span = document.getElementById('myspan');

var int = setInterval(function() {
    if ((span.innerHTML += '.').length == 4) 
        span.innerHTML = '';
    //clearInterval( int ); // at some point, clear the setInterval
}, 100);

Ответ 4

На мой взгляд, самый простой способ - это инструкция if/else.

Тем не менее, небольшая математика для вычисления длины точек и знаменитого Array.join -hack для повторения точки char тоже должна сделать трюк.

function dotdotdot(cursor, times, string) {
  return Array(times - Math.abs(cursor % (times * 2) - times) + 1).join(string);
}

var cursor = 0;
setInterval(function () {
  document.body.innerHTML = dotdotdot(cursor++, 3, '.')
}, 100);

Ответ 5

Я использую это:

var dotspan = document.getElementById("loading-dot-dot-dot");
var dotdotdot = setInterval(function() {
    if(dotspan.innerHTML.length == 3) {
        dotspan.innerHTML = "";
    } else {
        dotspan.innerHTML += ".";
    }
}, 250);

//When loading finished, disable "dotting"
clearInterval(dotdotdot);