Question

我想创建一些加载点，如下所示：

在0000毫秒时，范围内容为：.

在0100毫秒时，范围内容为：..

在0200毫秒时，跨度内容为：...

在一个循环中。

制作它的最佳/最简单方法是什么？

Answer 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

正如Ivo在评论中所说，你需要clear the interval，特别是如果你在等待结束后没有加载新页面。：d

Answer 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 sample

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

Answer 4

这与VeikoJää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>

Answer 5

示例：https://codepen.io/lukaszkups/pen/NQjeVN

您也可以为css content设置动画！

// HTML
<p>Loading<span></span><p>

// CSS (nested SASS)
p
  span
    &:before
      animation: dots 2s linear infinite
      content: ''

  @keyframes dots
    0%, 20%
      content: '.'
    40%
      content: '..'
    60%
      content: '...'
    90%, 100%
      content: ''

Answer 6

let span = document.querySelector('span');
    i = 0;

setInterval(() => {
    span.innerText = Array(i = i > 2 ? 0 : i + 1).fill('.').join('');
}, 500)

Answer 7

使用String.prototype.repeat()，您可以执行以下操作：

var element = document.querySelector(...);
var counter = 0;

var intervalId = window.setInterval(function() {
    counter += 1
    element.innerHTML = '.'.repeat(1 + counter % 3)
}, 350);

// Use the following to clear the interval
window.clearInterval(intervalId)

注意：当前不支持String.prototype.repeat()

点dotdot dotdotdot加载？

7 个答案: