Точка dotdot dotdotdot как загрузка? - PullRequest
Новая
       21

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

39 голосов
/ 09 января 2011

Я хочу создать несколько точек загрузки, например:

В 0000 миллисекунд содержание интервала составляет: .

В 0100 миллисекунд содержание интервала составляет: ..

В 0200 миллисекунд содержание интервала составляет: ...

В цикле.

Какой самый лучший / самый простой способ сделать это?

Ответы [ 5 ]

50 голосов
/ 09 января 2011 
<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

39 голосов
/ 05 декабря 2014

Или .. Вы можете сделать это с помощью 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;}}

Пример кода

4 голосов
/ 03 апреля 2018

Это похоже на решение Veiko Jääger.В этом решении цвет точек совпадает с цветом текста, с которым он связан. 

<html>
<head>
    <style>
.appendMovingDots:after {
    content: ' .';
    animation: dots 3s steps(1, end) infinite;
}
@keyframes dots {
    0%, 12.5% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    37.5% {
        text-shadow: .5em 0;
    }
    50% {
        text-shadow: .5em 0, 1em 0;
    }
    62.5% {
        text-shadow: .5em 0, 1em 0, 1.5em 0;
    }
    75% {
        text-shadow: .5em 0, 1em 0, 1.5em 0, 2em 0;
    }
    87.5%, 100%{
        text-shadow: .5em 0, 1em 0, 1.5em 0, 2em 0, 2.5em;
    }
}	
		</style>
	</head>
	<body>	
		<span class="appendMovingDots" style="font-size:20px">This is a test</span>	
	</body>
</html>
4 голосов
/ 09 января 2011

Пример: 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);
0 голосов
/ 29 апреля 2015

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

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

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

Вы могли бы немного улучшить читабельность, обернув часть-счетчик-часть и строку-повторение в отдельные функции.

...